Skip to content

Commit 9902b15

Browse files
thescientist13thescientist13
committed
add HTML Modules entry to the report
1 parent d6d85f6 commit 9902b15

File tree

1 file changed

+30
-33
lines changed

1 file changed

+30
-33
lines changed

‎reports/2022.html‎

Lines changed: 30 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -82,15 +82,13 @@ <h3>Table of Contents</h3>
8282
<tr>
8383
<th>Feature or Problem</th>
8484
<th>GitHub Issue(s)</th>
85-
<th>Priority</th>
8685
<th>Status(?)</th>
8786
</tr>
8887
</thead>
8988
<tbody>
9089
<tr>
9190
<th><a href="#form-associated-custom-elements">Form-Associated Custom Elements</a></th>
9291
<td><a href="https://github.com/WICG/webcomponents/issues/187">WICG/webcomponents#187</a></td>
93-
<td>Critical</td>
9492
<td>Some implementation</td>
9593
</tr>
9694
<tr>
@@ -101,122 +99,103 @@ <h3>Table of Contents</h3>
10199
<a href="https://github.com/WICG/webcomponents/issues/917">WICG/webcomponents#917</a><br>
102100
<a href="https://github.com/WICG/webcomponents/issues/916">WICG/webcomponents#916</a>
103101
</td>
104-
<td>Critical</td>
105102
<td>Uncertain</td>
106103
</tr>
107104
<tr>
108105
<th><a href="http://localhost:8080/status.html#constructable-stylesheets-adoptedstylesheets">Constructable Stylesheets & adoptedStyleSheets</a></th>
109106
<td><a href="https://github.com/WICG/webcomponents/issues/169">WICG/webcomponents#468</a></td>
110-
<td>Critical</td>
111107
<td>Some implementation</td>
112108
</tr>
113109
<tr>
114110
<th><a href="#css-module-scripts">CSS Module Scripts</a></th>
115111
<td><a href="https://github.com/WICG/webcomponents/issues/759">WICG/webcomponents#759</a></td>
116-
<td>Critical</td>
117112
<td>Some implementation</td>
118113
</tr>
119114
<tr>
120115
<th><a href="#scoped-element-registries">Scoped Element Registries</a></th>
121116
<td><a href="https://github.com/WICG/webcomponents/issues/716">WICG/webcomponents#716</a></td>
122-
<td>Critical</td>
123117
<td>Consensus</td>
124118
</tr>
125119
<tr>
126120
<th><a href="#declarative-shadow-dom">Declarative Shadow DOM</a></th>
127121
<td><a href="https://github.com/whatwg/dom/issues/831">whatwg/dom#831</a></td>
128-
<td>Critical</td>
129122
<td>Partial consensus, some implementation</td>
130123
</tr>
131124
<tr>
132125
<th><a href="#composed-selection">Composed Selection</a></th>
133126
<td><a href="https://github.com/WICG/webcomponents/issues/79">WICG/webcomponents#79</a></td>
134-
<td>High</td>
135127
<td>Partial consensus, divergent partial implementations</td>
136128
</tr>
137129
<tr>
138130
<th>Declarative CSS Modules</th>
139131
<td><a href="https://github.com/WICG/webcomponents/issues/939">WICG/webcomponents#939</a></td>
140-
<td>High</td>
141132
<td>Not Addressed</td>
142133
</tr>
143134
<tr>
144135
<th><a href="#children-changed-callback">Children changed callback</a></th>
145136
<td><a href="https://github.com/WICG/webcomponents/issues/809">WICG/webcomponents#809</a></td>
146-
<td>High</td>
147137
<td>Uncertain</td>
148138
</tr>
149139
<tr>
150140
<th><a href="#open-styling-of-shadow-roots">Open styling of shadow roots</a></th>
151141
<td><a href="https://github.com/WICG/webcomponents/issues/909">WICG/webcomponents#909</a></td>
152-
<td>High</td>
153142
<td>Not addressed</td>
154143
</tr>
155144
<tr>
156145
<th><a href="#declarative-custom-elements">Declarative custom elements</a></th>
157146
<td><a href="https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Declarative-Custom-Elements-Strawman.md">Strawperson</a></td>
158-
<td>High</td>
159147
<td>Not addressed</td>
160148
</tr>
161149
<tr>
162150
<th><a href="#themeing">Themeing</a></th>
163151
<td></td>
164152
<td></td>
165-
<td></td>
166153
</tr>
167154
<tr>
168155
<th><a href="#styling-children-of-slotted-content">Styling children of slotted content</a></th>
169156
<td></td>
170157
<td></td>
171-
<td></td>
172158
</tr>
173159
<tr>
174160
<th><a href="#custom-css-state">Custom CSS State</a></th>
175161
<td></td>
176162
<td></td>
177-
<td></td>
178163
</tr>
179164
<tr>
180165
<th><a href="#imperative-slot-assignement">Imperative Slot Assignement</a></th>
181166
<td></td>
182167
<td></td>
183-
<td></td>
184168
</tr>
185169
<tr>
186170
<th><a href="#css-properties-and-values-inside-shadow-root">CSS Properties and values inside shadow root</a></th>
187171
<td></td>
188172
<td></td>
189-
<td></td>
190173
</tr>
191174
<tr>
192175
<th><a href="#lazy-custom-element-definitions">Lazy custom element definitions</a></th>
193176
<td><a href="https://github.com/WICG/webcomponents/issues/782">WICG/webcomponents#782</a></td>
194-
<td></td>
195177
<td>Uncertain</td>
196178
</tr>
197179
<tr>
198180
<th><a href="#dom-parts">DOM Parts</a></th>
199181
<td><a href="https://github.com/WICG/webcomponents/blob/gh-pages/proposals/DOM-Parts.md">DOM Part API - First Step of Template Instantiation</a></td>
200-
<td></td>
201182
<td>Uncertain</td>
202183
</tr>
203184
<tr>
204185
<th><a href="#html-modules">HTML modules</a></th>
186+
<td><a href="https://github.com/WICG/webcomponents/issues/645">WICG/webcomponents#645</a></td>
205187
<td></td>
206-
<td></td>
207-
<td></td>
188+
<td>Partial consensus, no implementations</td>
208189
</tr>
209190
<tr>
210191
<th><a href="#custom-attributes">Custom Attributes</a></th>
211192
<td><a href="https://github.com/w3c/webcomponents-cg/discussions/31#discussioncomment-3163644">Web Components CG Discussion</a></td>
212-
<td></td>
213193
<td>Not addressed</td>
214194
</tr>
215195
<tr>
216196
<th>---</th>
217197
<td>---</td>
218198
<td>---</td>
219-
<td>---</td>
220199
</tr>
221200
</tbody>
222201
</table>
@@ -744,7 +723,7 @@ <h3>Status</h3>
744723
</section>
745724
<section>
746725
<h3>Initial API Summary/Quick API Proposal</h3>
747-
<p>
726+
<p>Below is an example taken from the <a href="https://web.dev/declarative-shadow-dom">Declarative Shadow DOM</a>
748727
<pre>
749728
&lt;host-element&gt;
750729
&lt;template shadowroot="open"&gt;
@@ -1762,33 +1741,46 @@ <h3>Links</h3>
17621741
<dt>Previous WCCG Report(s)</dt>
17631742
<dd>N/A</dd>
17641743
<dt>GitHub issues:</dt>
1765-
<dd>---</dd>
1744+
<dd><a href="https://github.com/WICG/webcomponents/issues/645">HTML Modules</a></dd>
17661745
<dt>Browser positions:</dt>
1767-
<dd>---</dd>
1746+
<dd><a href="https://chromestatus.com/feature/4854408103854080">Chrome</a></dd>
1747+
<dd><a href="https://mozilla.github.io/standards-positions/#html-modules">Firefox</a></dd>
1748+
<dd><a href="https://webkit.org/status/#feature-html-import">Safari</a></dd>
17681749
</dl>
17691750
</section>
17701751
<section>
17711752
<h3>Description</h3>
1772-
<p>---</p>
1753+
<p>HTML Modules would provide a means of referencing HTML through the web's module system. For Web Components specifically, this would allow the usage of <code>import</code> to load and initialize the template of a custom element, much in the same way <a href="#css-module-scripts">CSS Modules</a> would work for an <code>adoptedStyleSheet</code>.</p>
1754+
<p>Additionally, this could open up the concept of <a href="https://github.com/WICG/webcomponents/issues/645#issuecomment-343601237">Single File Components (SFC)</a> to the web.</p>
17731755
</section>
17741756
<section>
17751757
<h3>Status</h3>
17761758
<ul>
1777-
<li>---</li>
1759+
<li>Chrome (shipped, but not aligned with ESM)</li>
17781760
</ul>
17791761
</section>
17801762
<section>
17811763
<h3>Initial API Summary/Quick API Proposal</h3>
1782-
<p>Summary or proposal based on current status; paragraph(s) and code.</p>
1764+
<pre class="javascript">
1765+
import template from 'my-template.html' as HTMLTemplateElement;
1766+
1767+
MyCustomElement extends HTMLElement {
1768+
constructor() {
1769+
const root = this.attachShadow({mode: 'closed'});
1770+
root.appendChild(document.importNode(template));
1771+
}
1772+
}
1773+
</pre>
17831774
</section>
17841775
<section>
17851776
<h3>Key Scenarios</h3>
1786-
<p>---</p>
1777+
<p>The primary motivation for HTML Modules is to round out ESM so that all of the three main web languages (HTML / CSS / JS) can be leveraged through a module system. For Web Components, this is especially helpful for scenarios related to Server Side Rendering or any form of templating, static or otherwise. Having a common mechanism in JavaScript to author and use Web Components makes for a great experience all around.</p>
1778+
<p>Additionally it will work great if you prefer to separate your technologies (e.g. <em>my-component.(js|css|html)</em> ), or your (CSS|HTML)-in-JS</p> in one file.
17871779
</section>
17881780
<section>
17891781
<h3>Concerns</h3>
17901782
<ul>
1791-
<li>---</li>
1783+
<li>Main concern is that now that ESM and Import Assertions are a thing, it is recognized that the proposal for HTML Modules needs to be re-drafted accordingly.</li>
17921784
</ul>
17931785
</section>
17941786
<section>
@@ -1800,13 +1792,18 @@ <h3>Dissenting Opinion</h3>
18001792
<section>
18011793
<h3>Related Specs</h3>
18021794
<ul>
1803-
<li>---</li>
1795+
<li><a href="#css-module-scripts">CSS Modules</a></li>
1796+
<li><a href="#declarative-shadow-dom">Declarative Shadow DOM</a></li>
1797+
<li><a href="#declarative-custom-elements">Declarative Custom Elements</a></li>
18041798
</ul>
18051799
</section>
18061800
<section>
18071801
<h3>Open Questions</h3>
18081802
<ul>
1809-
<li>---</li>
1803+
<li>What sort of "scope" should the imported HTML be allowed to have? Should it execute inline script tags?</li>
1804+
<li>What should the inline API look like for this?</li>
1805+
<li>How to treat the incoming HTML; as a <code>Document</code>? As a string? (see the scope concern above)</li>
1806+
<li>Would / should this align with the the import assertions spec, like with CSS Modules?</li>
18101807
</ul>
18111808
</section>
18121809
</section>

0 commit comments

Comments
 (0)