Declarative Shadow DOM | CSS and UI | Chrome for Developers

Declarative Shadow DOM is a web platform feature, currently in the standardization process. It is enabled by default in Chrome version 111. Shadow DOM is one of the three Web Components standards, rounded out by HTML templates and Custom Elements. Shadow DOM provides a way to scope CSS styles to a specific DOM subtree and isolate that subtree from the rest of the document. The <slot> element gives

[efcl]

Chrome 85に実験フラグ付きで実装されたDeclarative Shadow DOMについて。 `<tempalte>`要素の`showroot`属性で宣言的にShadow Root宣言できる。 SSRの対応、`getInnerHTML()`でのShaowRootの取得、Custom Elementの`attachShadow()`の挙動、細かい挙動の解説

[hc0001]

<template> 要素に shadowroot 属性を付与することで、ホスト要素に Shadow Root を生やせるようになる。これによって Shadow DOM を宣言的に生成できる。