1 - 10 件 / 10件
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
以下のコードで HTML 全体の CSS を取得して Shadow DOM に適用することができます。 最近まで replaceSync() と adoptedStyleSheets() の存在を知らなかったのですが、 この 2つを使うと毎回 style タグを書き出すより効率的に処理できるらしい。 これまで Shadow DOM の中に link タグを書くような方法を使っていたのですが、link タグだと最適化がしにくい問題があります。 CSS はインライン化したほうが高速なので、その時にも同じように使える方法が欲しかったのですが、この方法でいけるとわかりました。 document.styleSheets も知らなかった...。 function getGlobalCSS() { let cssText = ""; for (const stylesheet of document.sty
宣言型 Shadow DOM は `<template>` 要素を使用して Shadow DOM を構築する方法です。宣言型 Shadow DOM を使用することで、従来の JavaScript を使用した Shadow DOM の構築方法と比較して、サーバーサイドレンダリング(SSR)に対応しているため、パフォーマンスの向上や SEO 対策に期待されます。 Shadow DOM は Web Components を構成する 3 つの技術の 1 つです。Shadow DOM はコンポーネントのカプセル化を実現します。Shadow DOM で定義されたスタイルは Shadow DOM の外部に影響を与えず、また外部のスタイルの影響を受けません。 Shadow DOM は再利用可能なコンポーネントを構築するために重要な技術ですが、従来は JavaScript を使用しなければ Shadow D
@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 関連の資料 https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM https://javascript.info/shadow-dom https://qiita.com/alangdm/it
We’re pleased to announce that support for the declarative shadow DOM API has been added and enabled by default in Safari Technology Preview 162. To recap, shadow DOM is a part of Web Components, a set of specifications that were initially proposed by Google to enable the creation of reusable widgets and components on the web. Since then these specifications have been integrated into the DOM and H
2020年10月07日 template 要素の shadowroot 属性による宣言的な Shadow DOM Shadow DOM は、代替要素を除いた任意の HTML 要素を DOM API で参照して attachShadow({ ... }) メソッドを呼び出すことで命令的に生成できる。これを新たに <template> 要素の shadowroot 属性によって、対象の HTML 要素の Shadow DOM を宣言的に生やせるようになる仕様が提案されている。既に Chrome 85 で試験的に実装されており、フラグ付きで利用できるようになっている。この記事は自分用にまとめたメモ。 Add declarative Shadow DOM features by mfreed7 · Pull Request #892 · whatwg/dom Add declarative Shad
Interop 2024のFocus Areasの1つに、Web Componentsがあります。このWeb Componentsに関連する機能として、Declarative Shadow DOMやsetHTMLUnsafe、parseHTMLUnsafeが2024年に入って新たにBaselineに追加されました。 これらの機能・Web APIは、サーバーサイドでの宣言的なShadow DOMの構築によるJavaScriptが無効な環境でも動作するWeb Componentsの実現や、クライアントサイドでの動的なDeclarative Shadow DOMの追加によるWeb Componentsの利用範囲の拡大に寄与してくれています。 今回は、このような盛り上がりを見せるWeb Componentsが、Declarative Shadow DOMやsetHTMLUnsafe・parseHT
The CSS Zen Garden philosophy is a good one. Your markup should be just what it needs to be to convey the semantics of your document, and no more. Through the magic of CSS you can then make that document look however you’d like it to. That’s the idea anyway, but sometimes reality falls a bit short of this ideal. You find that you need to add some otherwise-unnecesary structure to your document in
28 Nov Shadow DOM and accessibility: the trouble with ARIA Posted November 28, 2022 by Nolan Lawson in accessibility, web components. Tagged: shadow dom. 3 Comments Shadow DOM is a kind of retcon for the web. As I’ve written in the past, shadow DOM upends a lot of developer expectations and invalidates many tried-and-true techniques that worked fine in the pre-shadow DOM world. One potentially sur
世はReact, Vueなどのフロントエンドフレームワーク大航海時代 どんなライブラリーを使って、どんな方法でCSSを書けばよいのか 日夜、熱い議論が交わされている今日この頃.. ブラウザ標準だけでコンポーネントもスコープドCSSも書けるんだよ! 実は一方でWebの標準仕様であるWeb Componentsが既にIE11を除く全てのモダンブラウザで動作するようになっており、IE11のサポート終了も1年を切ったことから、今後、Web Componentsという標準仕様がどんどん積極的に活用されていくことになるだろうという世情もあったのである..!(これらは必ずしもReactやVueと競合するものでもないが)。 ちょっとここらで、一度、ReactとかVueとかから少しの間(ほんの10分程度?)頭を離して、標準技術だけで今どんなことが出来るようになっているのか、ひょっこり試してみるにはちょうどいい時
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く