Skip to content

docs: add API report update for declarative elements, lazy elements, DOM parts, and custom attributes #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Aug 25, 2022
Merged

docs: add API report update for declarative elements, lazy elements, DOM parts, and custom attributes #41

Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c96f151
chore: add name to editors lists
EisenbergEffect Aug 18, 2022
3865606
docs: update introduction for dom parts, laze elements, and custom attrs
EisenbergEffect Aug 18, 2022
1307089
docs: add details for Declarative Custom Elements
EisenbergEffect Aug 20, 2022
ee1f39e
docs: add details for Lazy custom element definitions
EisenbergEffect Aug 20, 2022
217d33c
docs: add details for DOM Parts API
EisenbergEffect Aug 20, 2022
3f5bc74
docs: add details for Custom Attributes
EisenbergEffect Aug 20, 2022
433eed4
docs: add discussion link for declarative custom elements
EisenbergEffect Aug 22, 2022
c95dea6
fix: attempt to escape characters
EisenbergEffect Aug 22, 2022
fa4f823
Merge branch 'main' into users/eisenbergeffect/2022-report-update
Westbrook Aug 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 86 additions & 17 deletions reports/2022.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@
name: "Alan Dávalos",
url: "https://github.com/alangdm",
},
{
name: "Rob Eisenberg",
url: "https://github.com/eisenbergeffect",
},
],
github: "w3c/webcomponents-cg",
shortName: "webcomponents-cg",
Expand Down Expand Up @@ -159,15 +163,15 @@ <h3>Table of Contents</h3>
</tr>
<tr>
<th><a href="#lazy-custom-element-definitions">Lazy custom element definitions</a></th>
<td><a href="https://github.com/WICG/webcomponents/issues/782">WICG/webcomponents#782</a></td>
<td></td>
<td></td>
<td></td>
<td>Uncertain</td>
</tr>
<tr>
<th><a href="#dom-parts">DOM Parts</a></th>
<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>
Copy link

@sashafirsov sashafirsov Aug 22, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@EisenbergEffect ,
DOM parts needs a link to discussion media. Like an issue in format suggested by @Westbrook.
I have created such for DSD, we need similar for DOM parts.

<td></td>
<td></td>
<td></td>
<td>Uncertain</td>
</tr>
<tr>
<th><a href="#html-modules">HTML modules</a></th>
Expand All @@ -177,9 +181,9 @@ <h3>Table of Contents</h3>
</tr>
<tr>
<th><a href="#custom-attributes">Custom Attributes</a></th>
<td><a href="https://github.com/w3c/webcomponents-cg/discussions/31#discussioncomment-3163644">Web Components CG Discussion</a></td>
<td></td>
<td></td>
<td></td>
<td>Not addressed</td>
</tr>
<tr>
<th>---</th>
Expand Down Expand Up @@ -799,51 +803,116 @@ <h3>Links</h3>
<dt>Previous WCCG Report(s)</dt>
<dd><a href="https://w3c.github.io/webcomponents-cg/index.html#declarative-custom-elements">2021</a></dd>
<dt>GitHub issues:</dt>
<dd>---</dd>
<dd>
<ul>
<li><a href="https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Declarative-Custom-Elements-Strawman.md">Initial Proposal</a></li>
<li><a href="https://github.com/Westbrook/custom-element-proposals/pull/1">Single File Component Explainer</a></li>
<li><a href="https://github.com/WICG/webcomponents/issues/645">Cross-over with HTML Modules</a></li>
</ul>
</dd>
<dt>Browser positions:</dt>
<dd>---</dd>
</dl>
</section>
<section>
<h3>Description</h3>
<p>---</p>
<p>A method of creating custom elements completely with declarative HTML, not requiring JavaScript.</p>
</section>
<section>
<h3>Status</h3>
<ul>
<li>---</li>
<li>Strawperson proposal available.</li>
<li>Dependent on many other proposals that are not yet finished.</li>
<li>Many people would like to have something like this but it seems too early due to the number of unfinished dependencies.</li>
</ul>
</section>
<section>
<h3>Initial API Summary/Quick API Proposal</h3>
<p>Summary or proposal based on current status; paragraph(s) and code.</p>
<p>The following, copied from the original strapwerson proposal, demonstrates how a declarative custom element could be defined with the need for JavaScript.</p>
<pre class="javascript">&lt;definition&nbsp;name=&quot;percentage&#45;bar&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;template&nbsp;shadowmode=&quot;closed&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;progressbar&quot;&nbsp;role=&quot;progressbar&quot;&nbsp;aria&#45;valuemin=&quot;0&quot;&nbsp;aria&#45;valuemax=&quot;100&quot;&nbsp;aria&#45;valuenow=&quot;{{root.attributes.percentage.value}}&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;bar&quot;&nbsp;style=&quot;width:&nbsp;{{root.attributes.percentage.value}}%&quot;&gt;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;label&quot;&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:host&nbsp;{&nbsp;display:&nbsp;inline&#45;block&nbsp;!important;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#progressbar&nbsp;{&nbsp;position:&nbsp;relative;&nbsp;display:&nbsp;block;&nbsp;width:&nbsp;100%;&nbsp;height:&nbsp;100%;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#bar&nbsp;{&nbsp;background&#45;color:&nbsp;#36f;&nbsp;height:&nbsp;100%;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#label&nbsp;{&nbsp;position:&nbsp;absolute;&nbsp;top:&nbsp;0px;&nbsp;left:&nbsp;0px;&nbsp;width:&nbsp;100%;&nbsp;height:&nbsp;100%;&nbsp;text&#45;align:&nbsp;center;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/template&gt;
&lt;/definition&gt;
</pre>
</section>
<section>
<h3>Key Scenarios</h3>
<p>---</p>
<ul>
<li>Create reusable custom elements without needing to load or run JavaScript.</li>
<li>Use custom elements in noscript contexts.</li>
<li>Open up new opportunities for more efficient server-side-rendering. e.g. Smaller html payloads due to less duplication of HTML</li>
<li>Codify framework "single file component" patterns in the platform.</li>
</ul>
</section>
<section>
<h3>Concerns</h3>
<ul>
<li>---</li>
<li>Binding syntax for attributes is extremely verbose. e.g. "{{root.attributes.percentage.value}}" is used instead of something terser like "{{percentage}}" .</li>
<li>Binding syntax doesn't look extensible.</li>
<li>A lot of cooperation from tooling and plugin authors will be required to enable developer ergonomics and adoption.</li>
<li>The current proposal's script model creates a second way of coding components with some different behavior from what we have today.</li>
<li>The current proposal conflicts in syntax with Declarative Shadow DOM.</li>
</ul>
</section>
<section>
<h3>Dissenting Opinion</h3>
<ul>
<li>---</li>
</ul>
<p>No dissenting opinions yet.</p>
</section>
<section>
<h3>Related Specs</h3>
<ul>
<li>---</li>
<li>
<a href="https://html.spec.whatwg.org/multipage/scripting.html#htmltemplateelement">HTML Template Element</a>
</li>
<li>
<a href="https://html.spec.whatwg.org/multipage/custom-elements.html#form-associated-custom-elements">Form Associated Custom Elements</a>
</li>
<li>
<a href="https://wicg.github.io/custom-state-pseudo-class/#customstateset">Custom State Set</a>
</li>
<li>
<a href="#declarative-css-modules">Declarative CSS Modules</a>
</li>
<li>
<a href="#dom-parts">DOM Part API</a>
</li>
<li>
<a href="https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Template-Instantiation.md">Template Instantiation</a>
</li>
<li>
<a href="#scoped-element-registries">Scoped Custom Element Registries</a>
</li>
<li>
<a href="#lazy-custom-element-definitions">Lazy Custom Element Definitions</a>
</li>
<li>
<a href="#cross-root-aria">Cross Root Aria</a>
</li>
<li>
<a href="#html-modules">HTML Modules</a>
</li>
</ul>
</section>
<section>
<h3>Open Questions</h3>
<ul>
<li>---</li>
<li>Shouldn't attributes be declared instead of inferred through the bindings?</li>
<li>How to handle boolean attributes and reflected attributes?</li>
<li>If script is provided through src, how should loading be handled? Does it block or can it be partially upgraded?</li>
<li>How does this support aria roles, degegated aria, and cross-root aria?</li>
<li>How is form association handled?</li>
<li>When script is provided, how does it interact with or gain access to the template and styles?</li>
<li>Should there be ways to ship definitions along with a data set or top-level template so that small payloads of data can be automatically combined with template and element declarations without the need for JS?</li>
</ul>
</section>
</section>
Expand Down