HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM

2024/10/20 71 users HTML サーバーサイドレンダリング template 従来

HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM 2024.10.19 宣言型 Shadow DOM は `<template>` 要素を使用して Shadow DOM を構築する方法です。宣言型 Shadow DOM を使用することで、従来の JavaScript を使用した Shadow DOM の構築方法と比較して、サーバーサイドレンダリング（SSR）に対応しているため... 続きを読む

Shadow DOMとCSSの現状

2024/02/27 70 users CSS 現状

2024-02-27 DOMDOMトークス #1 続きを読む

HTML 全体の CSS を取得して Shadow DOM に適用する

2023/06/10 126 users CSS HTML 全体 link 毎回

以下のコードで HTML 全体の CSS を取得して Shadow DOM に適用することができます。 最近まで replaceSync() と adoptedStyleSheets() の存在を知らなかったのですが、 この 2つを使うと毎回 style タグを書き出すより効率的に処理できるらしい。 これまで Shadow DOM の中に link タグを書くような方法を使っていたの... 続きを読む

ep.68 Web Standard な Modular CSS - 現場で使ってみてわかる Shadow DOM の嬉しさ | UIT INSIDE - LINE UIT室の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

2020/11/20 8 users Podcast twitter.com uhyo_ キャッチ

@AlanGDavalos が Web Platform Study Group Organizer の @takanoripe, LINE 証券フロントエンドエンジニアの @uhyo_ と共に、 Shadow DOM について語りました。 ゲスト紹介 @takanoripe https://twitter.com/takanoripe UI Designer / Front-End Engineer Web Platform Study Group Organizer 言及した Shadow DOM 関... 続きを読む

react-wc: Web ComponentsとReactで実現するCSS in JSの形 - uhyo/blog

2020/10/03 15 users styled-components React uhyo

CSS in JSはJavaScriptのコードの中にCSSを書く手法の総称で、CSS Modulesやstyled-componentsなどがよく利用されています。 この記事では、筆者がCSS in JSについて考えてたどり着いた一つの解を紹介します。 また、そのために作ったライブラリreact-wcを紹介します。 Shadow DOMを活用する 筆者がたどり着いた考えは、... 続きを読む

Lightning Web Components の現実と標準仕様への準拠について - Qiita

2019/02/05 9 users Qiita コンポーネン 準拠 標準仕様 現実

Web Components と Lightning Web Components 「Web Components」というWeb標準仕様があります。具体的には "Custom Elements" と "Shadow DOM" および "HTML Template" という個別の仕様群となりますが、この仕様に対応したブラウザプラットフォーム上であれば、開発者はこの仕様に則ることで再利用可能なコンポーネン... 続きを読む

Web制作に役立つ、Chrome 72 デベロッパーツールの新機能のまとめ | コリス

2019/02/05 47 users デベロッパーツール コリス 検出 Web制作 まとめ

先週の1/29にリリースされたChrome 72に伴い、デベロッパーツールも新機能がアップデートされました。Web制作に役立つ新機能を紹介します。 What's New In DevTools (Chrome 72) パフォーマンス指標のビジュアル化 テキストノードをハイライト表示 Shadow DOMに役立つ「Copy JS path」 JavaScriptライブラリの検出 動画... 続きを読む

ブラウザのしくみ: データ構造とアルゴリズムと雰囲気で理解する DOM と Shadow DOM — hayato.io

2017/12/25 505 users hayato.io DOM アルゴリズム ブラウザ データ構造

この記事は Chromium Browser アドベントカレンダー 24 日目の記事です。 内容の一部は Chromium の Git レポジトリの Source/core/dom フォルダの README ファイル （英語）が元になっています。README の想定読者は Chrome の開発者でしたが、この記事の想定読者は一般の Web 開発者です。 この記事の一部は README ファイルに還... 続きを読む

祝: Atom の Web Components 導入、ついでに Atom Shell の話。 - steps to phantasien

2014/12/22 220 users Atom steps to phantasien DOM

GitHub 謹製 Atom エディタが Shadow DOM を使い始めたという。 めでたい。せっかくだから私も Atom を使ってみよう。 起動してテキスト書きもそこそこにインスペクタで DOM を眺める。 するとあら素敵。Shadow DOM のみならず Custom Elements もばりばり使われているじゃありませんか。 ためしにステータスバーをつついてみるとわかる。 Atom は U... 続きを読む

CSS Text Decoration、ルビ、Shadow DOMに挑戦「Test the Web Forward Meetup (仮), Tokyo #2」レポート | HTML5Experts.jp

2014/05/01 9 users ルビ Tokyo HTML5Experts.jp レポート

連載： イベントレポート (15)Test the Web Forward (TestTWF)とは、W3Cの仕様を実装・勧告させるために必要なテストケースをみんなで書こうというイベントです。Adobeが中心となり世界各国で開催され、その成果を認められ昨年秋にW3Cに取り込まれました。 日本でも昨年6月にTestTWFが開催され、成功を収めました。この活動を続けていこうと始めたのがhtml5jテスト... 続きを読む