Skip to content

Commit

Permalink
[css-shadow-parts-1] Remove theme from spec
Browse files Browse the repository at this point in the history
  • Loading branch information
fergald committed Nov 7, 2018
1 parent 2fc0d92 commit 141fedf
Showing 1 changed file with 13 additions and 72 deletions.
85 changes: 13 additions & 72 deletions css-shadow-parts-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Work Status: exploring
URL: http://drafts.csswg.org/css-shadow-parts/
Editor: Tab Atkins-Bittner, Google, http://xanthir.com/contact/, w3cid 42199
Editor: Fergal Daly, Google, fergal@chromium.org
Abstract: This specification defines the ''::part()'' and ''::theme()'' pseudo-elements on <a>shadow hosts</a>, allowing <a>shadow hosts</a> to selectively expose chosen elements from their <a>shadow tree</a> to the outside page for styling purposes.
Abstract: This specification defines the ''::part()'' pseudo-element on <a>shadow hosts</a>, allowing <a>shadow hosts</a> to selectively expose chosen elements from their <a>shadow tree</a> to the outside page for styling purposes.
</pre>

<pre class=link-defaults>
Expand All @@ -32,8 +32,8 @@ accidentally over-applying and making a different part of the page look wrong.
However, this styling barrier also makes it harder for a page to interact with its components
when it actually <em>wants</em> to do so.

This specification defines the ''::part()'' and ''::theme()'' pseudo-elements,
which allow an author to style specific, purposely exposed elements in a <a>shadow tree</a>
This specification defines the ''::part()'' pseudo-element,
which allows an author to style specific, purposely exposed elements in a <a>shadow tree</a>
from the outside page's context.
In combination with <a>custom properties</a>,
which let the outside page pass particular values
Expand Down Expand Up @@ -95,25 +95,14 @@ and component users,
should have much better performance,
and allows for better encapsulation/API surface.

Another interesting facet of using <a>custom properties</a>,
however,
is that inheritance doesn't stop at the first shadow tree.
Unless explicitly blocked,
a <a>custom property</a> inherits down thru nested trees,
allowing authors to style deeply nested components
as easily as they style directly-visible ones.
The same considerations apply to this case,
so we introduce ''::theme()'' to handle this.

It's important to note that ''::part()'' and ''::theme()''
offer <em>absolutely zero new theoretical power</em>.
They are not a rehash of the ''>>>'' combinator,
they're simply a more convenient and consistent syntax
It's important to note that ''::part()''
offers <em>absolutely zero new theoretical power</em>.
It is not a rehash of the ''>>>'' combinator,
it is simply a more convenient and consistent syntax
for something authors can already do with <a>custom properties</a>.
By separating out the explicitly "published" parts of an element
(the <a>shadow part map</a>)
from the sub-parts that it merely happens to contain
(the <a>computed shadow theme map</a>),
(the <a>shadow part map</a>
from the sub-parts that it merely happens to contain,
it also helps with encapsulation,
as authors can use ''::part()'' without fear of accidental over-styling.

Expand Down Expand Up @@ -259,45 +248,15 @@ Consider a mechanism to exclude sub-parts without forwarding them.
&lt;/script&gt;
</pre>

Exposing More Widely: the <{html-global/theme}> attribute {#theme-attr}
-----------------------------------------------------------------------

Issue: The theme section is intentionally a rough sketch at the moment.
The functionality of theme can be achieved with part alone
however it may be tedious to explicitly export parts as a theme.
The need for theme will be better understood once part is in use.


In addition to the [=shadow part map=],
every [=shadow root=] has a <dfn export for="shadow root">partial shadow theme map</dfn>
and a <dfn export for="shadow root">computed shadow theme map</dfn>
both of which are [=ordered maps=]
(with the same key/value shape as the [=shadow part map=]),
and the elements in the [=shadow tree=]
have a corresponding <dfn element-attr for=html-global>theme</dfn> attribute.

The <{html-global/theme}> attribute is parsed and interpreted identically to the <{html-global/part}> attribute,
except that it adds its entries to the [=shadow root’s=] [=partial shadow theme map=] instead.

If the [=shadow root’s=] {{ShadowRoot/mode}} is {{ShadowRootMode/"closed"}},
the [=computed shadow theme map=] is identical to the [=partial shadow theme map=].
Otherwise,
it's the union of the [=partial shadow theme map=]
with the [=computed shadow theme maps=] of every [=shadow host’s=] [=shadow root=] in its [=shadow tree=].

Issue(w3c/csswg-drafts#2381): Decide if theme can ever/always penetrate closed shadow roots.

Selecting a Shadow Element: the ''::part()'' and ''::theme()'' pseudo-elements {#part-theme}
Selecting a Shadow Element: the ''::part()'' pseudo-element {#part}
============================================================================================

The <dfn selector>::part()</dfn> and <dfn selector>::theme()</dfn> pseudo-elements
(collectively, the <dfn export>shadow-part pseudo-elements</dfn>)
allow you to select elements that have been exposed via a <{html-global/part}> attribute.
The syntaxes of them are:
The <dfn selector>::part()</dfn> pseudo-element
allows you to select elements that have been exposed via a <{html-global/part}> attribute.
The syntax is:

<pre class=prod>
::part() = ::part( <<ident>> )
::theme() = ::theme( <<ident>> )
</pre>

The ''::part()'' pseudo-element only matches anything
Expand All @@ -316,20 +275,6 @@ Otherwise, it matches nothing.
''#the-button::part(label)''.
</div>

The ''::theme()'' pseudo-element is similar,
except it can match regardless of whether the <a>originating element</a>
is a <a>shadow host</a> or not.
It matches the elements keyed to the specified <<ident>>
in the <a>computed shadow theme map</a> of the <a>shadow trees</a>
of the <a>originating element</a> or any descendants.

<div class="example">
For example,
'':root::theme(label)'' matches any element with <code>part="label"</code>
anywhere in the entire document,
no matter how deeply nested into shadow trees they are.
</div>

The <a>shadow-part pseudo-elements</a> can take additional pseudo-classes after them,
such as ''x-button::part(label):hover'',
but never match the <a>structural pseudo-classes</a>
Expand All @@ -347,10 +292,6 @@ but never match additional <a>shadow-part pseudo-elements</a>.
This is because doing so would expose more structural information
than is intended.

One can still target the nested label with a selector like
''x-panel::theme(label)''.
However, this will also select the labels of any other buttons in the panel.

If the <code>&lt;x-panel></code>'s internal confirm button had used something like
<code>part="confirm-button, * => confirm-*"</code>
to forward the button's internal parts up into the panel's own <a>part element map</a>,
Expand Down

0 comments on commit 141fedf

Please sign in to comment.