Skip to content

Commit d0c8823

Browse files
added declarative shadow DOM (#45)
SHA: c9572c6 Reason: push, by @Westbrook Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent 692ba6d commit d0c8823

File tree

1 file changed

+29
-11
lines changed

1 file changed

+29
-11
lines changed

2022.html

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,10 @@
132132
"name": "Alan Dávalos",
133133
"url": "https://github.com/alangdm"
134134
},
135+
{
136+
"name": "Owen Buckley",
137+
"url": "https://github.com/thescientist13"
138+
},
135139
{
136140
"name": "Caleb Williams",
137141
"url": "https://github.com/calebdwilliams"
@@ -167,6 +171,8 @@ <h1 id="title" class="title">Web Components Community Group: 2022 Spec/API statu
167171
<a class="u-url url p-name fn" href="https://westbrookjohnson.com">Westbrook Johnson</a>
168172
</dd><dd class="editor p-author h-card vcard">
169173
<a class="u-url url p-name fn" href="https://github.com/alangdm">Alan Dávalos</a>
174+
</dd><dd class="editor p-author h-card vcard">
175+
<a class="u-url url p-name fn" href="https://github.com/thescientist13">Owen Buckley</a>
170176
</dd><dd class="editor p-author h-card vcard">
171177
<a class="u-url url p-name fn" href="https://github.com/calebdwilliams">Caleb Williams</a>
172178
</dd>
@@ -762,57 +768,69 @@ <h1 id="title" class="title">Web Components Community Group: 2022 Spec/API statu
762768
<dt>Previous WCCG Report(s)</dt>
763769
<dd><a href="https://w3c.github.io/webcomponents-cg/index.html#declarative-shadow-dom">2021</a></dd>
764770
<dt>GitHub issues:</dt>
765-
<dd>---</dd>
771+
<dd><a href="https://github.com/whatwg/dom/issues/831">https://github.com/whatwg/dom/issues/831</a></dd>
766772
<dt>Browser positions:</dt>
767-
<dd>---</dd>
773+
<dd><a href="https://chromestatus.com/feature/5191745052606464">Chrome (Shipped)</a></dd>
774+
<dd><a href="https://github.com/mozilla/standards-positions/issues/335">Mozilla</a></dd>
775+
<dd><a href="https://github.com/WebKit/standards-positions/issues/12">Safari</a></dd>
768776
</dl>
769777
</section>
770778
<section id="description-4"><div class="header-wrapper"><h3 id="x7-2-description"><bdi class="secno">7.2 </bdi>Description</h3><a class="self-link" href="#description-4" aria-label="Permalink for Section 7.2"></a></div>
771779

772-
<p>---</p>
780+
<p>Declarative Shadow DOM is a mechanism to express Shadow DOM using only HTML, with no dependency on JavaScript, much like light DOM can be declaratively expressed today.</p>
773781
</section>
774782
<section id="links-6"><div class="header-wrapper"><h3 id="x7-3-links"><bdi class="secno">7.3 </bdi>Links</h3><a class="self-link" href="#links-6" aria-label="Permalink for Section 7.3"></a></div>
775783

776784
<ul>
777-
<li>---</li>
785+
<li><a href="https://web.dev/declarative-shadow-dom">Declarative Shadow DOM</a></li>
778786
</ul>
779787
</section>
780788
<section id="status-4"><div class="header-wrapper"><h3 id="x7-4-status"><bdi class="secno">7.4 </bdi>Status</h3><a class="self-link" href="#status-4" aria-label="Permalink for Section 7.4"></a></div>
781789

782790
<ul>
783-
<li>---</li>
791+
<li>Partial consensus, some implementation</li>
784792
</ul>
785793
</section>
786794
<section id="initial-api-summary-quick-api-proposal-4"><div class="header-wrapper"><h3 id="x7-5-initial-api-summary-quick-api-proposal"><bdi class="secno">7.5 </bdi>Initial API Summary/Quick API Proposal</h3><a class="self-link" href="#initial-api-summary-quick-api-proposal-4" aria-label="Permalink for Section 7.5"></a></div>
787795

788-
<p>Summary or proposal based on current status; paragraph(s) and code.</p>
796+
<p>
797+
</p><pre aria-busy="false"><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">host-element</span>&gt;</span>
798+
<span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">shadowroot</span>=<span class="hljs-string">"open"</span>&gt;</span>
799+
<span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span>
800+
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
801+
<span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Light content<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;&gt;</span>
802+
<span class="hljs-tag">&lt;/<span class="hljs-name">host-element</span>&gt;</span></code></pre>
803+
<p></p>
789804
</section>
790805
<section id="key-scenarios-4"><div class="header-wrapper"><h3 id="x7-6-key-scenarios"><bdi class="secno">7.6 </bdi>Key Scenarios</h3><a class="self-link" href="#key-scenarios-4" aria-label="Permalink for Section 7.6"></a></div>
791806

792-
<p>---</p>
807+
<p>Server-Side Rendering: Without Declarative Shadow DOM, servers cannot deliver complete websites that include web component content. Markup cannot be efficiently delivered and then hydrated with JavaScript client-side.</p>
808+
<p>JavaScript-less environments: Many web components could be implemented without JavaScript, taking advantage of encapsulated DOM and styles. However, web components cannot currently be rendered by users who have JavaScript disabled. Developers who are more comfortable with markup than with scripting may avoid shadow DOM altogether due to its tight coupling with JavaScript..</p>
793809
</section>
794810
<section id="concerns-4"><div class="header-wrapper"><h3 id="x7-7-concerns"><bdi class="secno">7.7 </bdi>Concerns</h3><a class="self-link" href="#concerns-4" aria-label="Permalink for Section 7.7"></a></div>
795811

796812
<ul>
797-
<li>---</li>
813+
<li>Mozilla considers this to be non-harmful, though debates the merits on ROI to developers weighed against the added complexity to be added to the HTML parser from a performance perspective.</li>
814+
<li>Safari would like to see compatibility with Scoped Element Registry addressed first.</li>
798815
</ul>
799816
</section>
800817
<section id="dissenting-opinion-3"><div class="header-wrapper"><h3 id="x7-8-dissenting-opinion"><bdi class="secno">7.8 </bdi>Dissenting Opinion</h3><a class="self-link" href="#dissenting-opinion-3" aria-label="Permalink for Section 7.8"></a></div>
801818

802819
<ul>
803-
<li>---</li>
820+
<li>N / A</li>
804821
</ul>
805822
</section>
806823
<section id="related-specs-4"><div class="header-wrapper"><h3 id="x7-9-related-specs"><bdi class="secno">7.9 </bdi>Related Specs</h3><a class="self-link" href="#related-specs-4" aria-label="Permalink for Section 7.9"></a></div>
807824

808825
<ul>
809-
<li>---</li>
826+
<li><a href="https://github.com/WICG/webcomponents/issues/716">Scoped Element Registries</a></li>
810827
</ul>
811828
</section>
812829
<section id="open-questions-4"><div class="header-wrapper"><h3 id="x7-10-open-questions"><bdi class="secno">7.10 </bdi>Open Questions</h3><a class="self-link" href="#open-questions-4" aria-label="Permalink for Section 7.10"></a></div>
813830

814831
<ul>
815-
<li>---</li>
832+
<li>Mozilla would like to see more <a href="https://github.com/whatwg/dom/issues/831#issuecomment-988394185">real world uses cases</a> of Declarative Shadow DOM in the wild. Which is a bit of a catch-22 when it is only supported in one browser and requires a polyfill.</li>
833+
<li>Safari would like to <a href="https://github.com/whatwg/dom/issues/831#issuecomment-797845645">get consensus on the solution for Scoped Element Registries first.</a></li>
816834
</ul>
817835
</section>
818836
</section>

0 commit comments

Comments
 (0)