Skip to content

Commit

Permalink
Intro to CSS Slot Content Detection
Browse files Browse the repository at this point in the history
  • Loading branch information
@Westbrook
Westbrook committed Sep 11, 2023
1 parent f545fe7 commit bfcdcad
Showing 1 changed file with 95 additions and 8 deletions.
103 changes: 95 additions & 8 deletions reports/2023.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@
{
name: "Westbrook Johnson",
url: "https://westbrookjohnson.com",
},
{
name: "Michael Warren",
url: "https://github.com/michaelwarren1106"
}
],
github: "w3c/webcomponents-cg",
Expand Down Expand Up @@ -285,12 +289,27 @@ <h3>Links</h3>
</section>
<section>
<h3>Description</h3>
<p>---</p>
<p>In shadow DOM, projection is the concept of placing an element into the light DOM and rendering it in a custom position via slots in the shadow DOM. This allows for greater control over the layout and styling of elements while also giving the user direct control over the contents and styling since the nodes are in the light DOM.</p>
<p>These are the current mechanisms in which to interact with slotted content:</p>
<ul>
<li><code>::slotted()</code> pseudo element
<ul>
<li>It can take selectors and can only select directly slotted children and not their subtree.</li>
</ul>
</li>
<li>
A <code>&lt;slot></code> can also have children
<ul>
<li>Those children will only render if there is no slotted content assigned to that slot</li>
<li>Content can include any Node including a whitespace text node</li>
</ul>
</li>
</ul>
</section>
<section>
<h3>Status</h3>
<ul>
<li>---</li>
<li>No official or concrete browser positions.</li>
</ul>
</section>
<section>
Expand All @@ -299,7 +318,77 @@ <h3>Initial API Summary/Quick API Proposal</h3>
</section>
<section>
<h3>Key Scenarios</h3>
<p>---</p>
<p>Currently there is no CSS-only way to determine whether a <code>&lt;slot></code> has content assigned to it without requiring the consumer of a web component to explicitly state so.</p>
<h4>Use Case Example</h4>
<p>In the web component-based <a href="https://github.com/material-components/material-web" target="_blank">https://github.com/material-components/material-web</a>, there is the Dialog component. The dialog component can have three sections slotted in:</p>
<ul>
<li>slot=headline</li>
<li>slot=content</li>
<li>slot=actions</li>
</ul>
<p>When the dialog’s content is slotted, the dialog must show a divider which is rendered in its shadow DOM. In essence the <code>&lt;md-divider></code> which is a sibling to <code>&lt;slot name=”content”></code> must be styled. e.g</p>
<pre>
<code>
&lt;md-dialog has-content>
&lt;template shadowrootmode="open">
&lt;style>
md-divider {
display: none;
}
:host([has-content]) md-divider {
display: flex;
}
&lt;/style>
...
&lt;div class="content">
&lt;md-divider class="before">&lt;/md-divider>
&lt;slot name="content">&lt;/slot>
&lt;md-divider class="after">&lt;/md-divider>
&lt;/div>
...
&lt;/template>

&lt;div slot="content">
Really long content ...
&lt;/div>
&lt;/md-dialog>
</code>
</pre>
<p>The DX would be cleaner if <code>has-content</code> could be inferred by the CSS rather than the user having to apply it or JS having to run at runtime.
<p><em>Using <code>/slotted/</code> for the sake of example.</em></p>
<pre>
<code>
&lt;md-dialog>
&lt;template shadowrootmode="open">
&lt;style>
md-divider {
display: none;
}
.content md-divider:has(~ slot/slotted/ *),
.content slot:has(/slotted/ *) ~ md-divider {
display: flex;
}
&lt;/style>
...
&lt;div class="content">
&lt;md-divider class="before">&lt;/md-divider>
&lt;slot name="content">&lt;/slot>
&lt;md-divider class="after">&lt;/md-divider>
&lt;/div>
...
&lt;/template>

&lt;div slot="content">
Really long content ...
&lt;/div>
&lt;/md-dialog>
</code>
</pre>
<p>This removes the need for the user to declare that there is slotted content twice:</p>
<ul>
<li><code>div[slot=content]</code></li>
<li><code>md-dialog[has-content]</code></li>
</ul>
</section>
<section>
<h3>Concerns</h3>
Expand Down Expand Up @@ -332,13 +421,13 @@ <h2>Declarative Shadow DOM</h2>
<h3>Links</h3>
<dl>
<dt>Previous WCCG Report(s)</dt>
<dd><a href="https://w3c.github.io/webcomponents-cg/index.html#declarative-shadow-dom">2021</a></dd>
<dd><a href="https://w3c.github.io/webcomponents-cg/2022.html#declarative-shadow-dom">2022</a></dd>
<dt>GitHub issues:</dt>
<dd><a href="https://github.com/whatwg/dom/issues/831">https://github.com/whatwg/dom/issues/831</a></dd>
<dt>Browser positions:</dt>
<dd><a href="https://chromestatus.com/feature/5191745052606464">Chrome (Shipped)</a></dd>
<dd><a href="https://github.com/mozilla/standards-positions/issues/335">Mozilla</a></dd>
<dd><a href="https://github.com/WebKit/standards-positions/issues/12">Safari</a></dd>
<dd><a href="https://github.com/WebKit/standards-positions/issues/12">Safari (Shipped)</a></dd>
</dl>
</section>
<section>
Expand All @@ -348,7 +437,7 @@ <h3>Description</h3>
<section>
<h3>Status</h3>
<ul>
<li>Partial consensus, some implementation</li>
<li>Partial consensus, multiple implementations</li>
</ul>
</section>
<section>
Expand All @@ -373,7 +462,6 @@ <h3>Key Scenarios</h3>
<h3>Concerns</h3>
<ul>
<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>
<li>Safari would like to see compatibility with Scoped Element Registry addressed first.</li>
</ul>
</section>
<section>
Expand All @@ -392,7 +480,6 @@ <h3>Related Specs</h3>
<h3>Open Questions</h3>
<ul>
<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. <a href="https://github.com/whatwg/dom/issues/831#issuecomment-1204554491" target="_blank">GitHub has confirmed that they are using DSD</a> and see many architectural benefits from it, especially for their design system. Although a polyfill exists, it comes as a bit of a catch-22 when trying to target pure SSR Web Components (HTML) use cases.</li>
<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>
</ul>
</section>
</section>
Expand Down

0 comments on commit bfcdcad

Please sign in to comment.