Re: [csswg-drafts] [css-shadow-parts][css-scoping] Allow ::part after ::slotted (#3896)

Note that the alternative of using CSS properties will cascade down the entire tree, instead of being short-circuited at the shadow DOM level when using `::part()`. Not only is that a performance issue, but a scoping one as well. 

The "Custom Elements way" is to use an attribute, but slotted elements shouldn't have to expose an attribute to its parent nor should a slotted element expect to have its attributes changed by a parent when it comes slotted. It would nice for custom elements to select stylings based on the type of child passed. For example, a custom element shouldn't have to have its tagname renamed or attribute added for no purpose other than to tell its parent what it is:

````html
<nav-bar>
  <nav-item>link 1</nav-item>
  <nav-item>link 2</nav-item>
</nav-bar>

<nav-drawer>
  <nav-item>link 1</nav-item>
  <nav-item>link 2</nav-item>
</nav-drawer>
````

`#nav-drawer-slot::slotted(nav-item)::part(icon) { font-size: 24px }` would be very useful. CSS properties is one solution, but you still have to create those CSS properties in `nav-item` as well as worry about children of the immediate child being affected.

The alternative setup is either duplicate and rename the Custom Element and assign them, or tag them with an attribute:

````html
<nav-bar>
  <nav-bar-item>link 1</nav-item>
  <nav-bar-item>link 2</nav-item>
</nav-bar>

<nav-drawer>
  <nav-item context=drawer>link 1</nav-item>
  <nav-item context=drawer>link 2</nav-item>
</nav-drawer>
````

Either way, styles would have to be scripted at the base (`nav-item`/`nav-drawer-item`) level, because the parent is unable to style it fully. That doesn't really make `nav-item` very extendable or customizable, despite having added a `::part(icon)` in it's shadow DOM. Everytime you want to add a new type of container for `nav-item`, (eg: nav-rail), you'd have to create new styles within `nav-item`, the child, instead of the parent.

-- 
GitHub Notification of comment by clshortfuse
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3896#issuecomment-1466821584 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 13 March 2023 19:27:36 UTC