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 タグを書くような方法を使っていたの... 続きを読む

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

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

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

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... 続きを読む