Css: How to Target ::Slotted Siblings in Shadow Dom Root

CSS: How to target ::slotted siblings in Shadow DOM root?

Sure you can select siblings of slots / slotted.

The thing you can not do is select a element which has been slotted and is not a top-level node.

Select siblings:

slot[name=<slotname>] ~ <selector>

Select slotted top-level node

::slotted(<compound-selector>)

A compound-selector contains a tag/class/id/name etc. but must not have any combinators. Like <space> for example.

.myClass OK

<anyTag>[<anyAttribute>[=<anyValue>]] OK

.<myClass> > .<anotherClass> NO

Examples

var element = document.querySelector('.templateMe');
var shadow = element.attachShadow({mode: 'open'});
var template = document.querySelector('.myTemplate');
shadow.appendChild(template.content.cloneNode(true));

<template class="myTemplate">
  <style type="text/css">
    ::slotted([slot=slot1]) { /* slot1 every slotted element - YES */
      color: red;
    }
    
    slot[name=slot1] { /* slot1 itself - YES */
      text-decoration: underline;
    }
    
    slot[name=slot1] + .siblingA { /* slot1 siblingA (direct sibling) - YES */
      color: green;
    }
    
    slot[name=slot1]  ~ .siblingB { /* slot1 siblingB (any sibling) - YES */
      color: orange;
    }
    
    slot[name=slot2]::slotted(.selectMeA) { /* slot2 TOP-LEVEL CHILD (slotted) - YES */
      color: purple;
    }
    
    slot[name=slot2]::slotted(.selectMeB) { /* slot2 NOT TOP-LEVEL CHILD - NO */
      font-weight: bold;
    }
    
    slot[name=slot2]::slotted(.selectMeC[name=myName]) { /* slot2 TOP-LEVEL CHILD (slotted) - YES */
      color: khaki;
    }
    
    slot[name=slot2] + .siblingC { /* slot2 sibling - YES */
      color: blue;
    }
    
  </style>
  <div>
    <slot name="slot1"></slot>
    <div class="siblingA">Sibling A of Slot 1</div>
    <div class="siblingB">Sibling B of Slot 1</div>
  </div>
  <hr/>
  <div>
    <slot name="slot2"></slot>
    <div class="siblingC">Sibling C of Slot 2</div>
  </div>
</template>

<div class='templateMe'>
  <span slot="slot1">Im in Solt 1</span>
  <span slot="slot2" class="selectMeA">
    Im in Solt 2, im selectable.
    <div class='selectMeB'>
      NOT selectable (because no top level node of slotted)!
    </div>
  </span>
  <span slot="slot2" class="selectMeC" name="myName">Im in Solt 2 too and selectable!</span>
</div>

::slotted CSS selector for nested children in shadowDOM slot

styling ::slotted elements in shadowDOM

TL;DR

• ::slotted Specs: https://drafts.csswg.org/css-scoping/#slotted-pseudo

• slotted content remains in light DOM, is reflected to a <slot> in shadow DOM

• ::slotted(x) targets the lightDOM outer-Element (aka 'skin'), NOT the SLOT in shadowDOM

• ::slotted(x) takes basic selectors

• Inheritable styles trickle into shadowDOM
  
  https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/

• For the latest WHATWG discussion on SLOT and related topics, see

  • https://github.com/whatwg/html/issues/6051#issuecomment-816971072
    
    Participants: rniwa (Apple) , annvk (Mozilla), dominic (Google)
  • https://github.com/WICG/webcomponents/issues/934#issuecomment-906063140

---

background

Yes, ::slotted() not styling nested elements is expected behavior.

The term slotted is counterintuitive,

it implies element lightDOM is moved to shadowDOM

slotted lightDOM is NOT moved, it remains.. hidden.. in lightDOM

the content (IF slotted) is reflected to a <slot></slot>

Or from Google Developer Documentation

, .

' ; .

I use the term reflected instead of render because render implies you can access it in shadowDOM.

You can not, because slotted content isn't in shadowDOM... only reflected from lightDOM.

---

Why :slotted has limited functionality

More advanced shadowDOM styling was tried.

WebComponents version 0 (v0) had <content> and ::content; but it was removed from the spec:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/content

The main takeway from the W3C standards discussions

(@hayatoito (Google team) here and here) is:

So in V1 we have :slotted: https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

---

Addition #1 : Performance if ::slotted allowed for complex selectors

From Mozilla developer Emilio:

source: https://github.com/w3c/webcomponents/issues/889

The performance issue is that it increments the amount of subtrees in
which every node needs to go look for rules that affect to them.

Right now the logic goes like: if you're slotted, traverse your slots
and collect rules in their shadow trees as needed. This is the code
This is nice because the complexity of styling the element
depends directly on the complexity of the shadow trees that you're
building, and it only affects slotted nodes.

If you want to allow combinators past slotted then every node would
need to look at its ancestor and prev-sibling chain and look at which
ones of them are slotted, then do that process for all their slots.
Then, on top, you also need to change the general selector-matching
code so that selectors that do not contain slotted selectors don't
match if you're not in the right shadow tree.

That's a cost that you pay for all elements, regardless of whether you
use Shadow DOM or ::slotted, and is probably just not going to fly.

---

So due to performance issues

:slotted( S ) got limited CSS selector functionality:

• ► it only takes simple selectors for S. --> Basically anything with a space won't work

• ► it only targets lightDOM 'skin'. --> In other words, only the first level

<my-element>
  <h1>Hello World</h1> 
  <p class=foo>
    <span>....</span>
  </p>
  <p class=bar>
    <span>....</span>
  </p>
</my-element>

• ::slotted(h1) and ::slotted(p) works

• ::slotted(.foo) works

• ::slotted(span) (or anything deeper) will not work (not a 'skin' element)

Note: ::slotted([Simple Selector]) confirms to Specificity rules,

but (being simple) does not add weight to lightDOM skin selectors, so never gets higher Specificity.

You might need !important in some (rare) use cases.

 <style>
  ::slotted(H1) {
    color: blue !important;
  }
 <style>

---

Styling slotted content

Also see: Applying more in depth selection to the :host CSS pseudo class

#1 - style lightDOM

The <span> is hidden in lightDOM, any changes made there will continue to reflect to its slotted representation.

That means you can apply any styling you want with CSS in the main DOM

(or a parent shadowDOM container if you wrapped <my-element> in one)

 <style>
  my-element span {
    .. any CSS you want
  }
 <style>

#2 - (workaround) move lightDOM to shadowDOM

If you move lightDOM to shadowDOM with: this.shadowRoot.append(...this.childNodes)

you can do all styling you want in a shadowDOM <style> tag.

Note: You can not use <slot></slot> and :slotted() anymore now.

<slot>s only works with content reflected from lightDOM.

For an example where an element wraps itself in an extra shadowDOM layer,

so no CSS bleeds out, and <slot>s can be used, see:

• https://jsfiddle.net/WebComponents/5w3o2q4t/?slotmeister

#3 - ::part (shadow Parts)

It is a different/powerful way of styling shadowDOM content:

Apple finally implemented shadowParts in Safari 13.1, March 2020

see:

• https://meowni.ca/posts/part-theme-explainer/

• https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/

• https://dev.to/webpadawan/css-shadow-parts-are-coming-mi5

• https://caniuse.com/mdn-html_global_attributes_exportparts

Note! ::part styles shadowDOM,

<slot></slot> content remains in lightDOM!

---

references

be aware: might contain v0 documentation!

• https://css-tricks.com/encapsulating-style-and-structure-with-shadow-dom/

• https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=en#composition_slot

• https://polymer-library.polymer-project.org/2.0/docs/devguide/style-shadow-dom#style-your-elements

• https://github.com/w3c/webcomponents/issues/331

• https://github.com/w3c/webcomponents/issues/745

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/slotchange_event

• ::part() - https://developer.mozilla.org/en-US/docs/Web/CSS/::part

---

Example: Using slots as a router

Change the slot-name on buttonclick and reflect content from lightDOM:

<template id=MY-ELEMENT>
  <style>
    ::slotted([slot="Awesome"]){
      background:lightgreen
    }
  </style>
  <slot><!-- all unslotted content goes here --></slot>
  <slot id=answer name=unanswered></slot>
</template>
<style>/* style all IMGs in lightDOM */
  img { max-height: 165px;border:3px dashed green }
  img:hover{ border-color:red }
</style>
<my-element><!-- content below is: lightDOM! -->
  SLOTs are: <button>Cool</button> <button>Awesome</button> <button>Great</button>
  <span slot=unanswered>?</span>
  <div  slot=Cool>   <img src="https://i.imgur.com/VUOujQT.jpg"></div>
  <span slot=Awesome><b>SUPER!</b></span>
  <div  slot=Awesome><img src="https://i.imgur.com/y95Jq5x.jpg"></div>
  <div  slot=Great>  <img src="https://i.imgur.com/gUFZNQH.jpg"></div>
</my-element>
<script>
  customElements.define('my-element', class extends HTMLElement {
    connectedCallback() {
      this.attachShadow({mode:'open'})
          .append(document.getElementById(this.nodeName).content.cloneNode(true));
      this.onclick = (evt) => {
           const label = evt.composedPath()[0].innerText; // Cool,Awesome,Great
           this.shadowRoot.getElementById("answer").name = label;
      }
    }
  });
</script>

How can I add children to the shadow DOM in HTML?

HTML in Custom Elements with shadowDOM remains (invisible) in lightDOM

You either move it yourself:

<my-element>
  Hello World, I came from lightDOM
</my-element>

<script>
  customElements.define("my-element", class extends HTMLElement {
    constructor() {
      super().attachShadow({
        mode: 'open'
      }); // sets and returns thi.shadowRoot for free
      this.wrapper = this.shadowRoot.appendChild(document.createElement('H1'));
      this.wrapper.innerHTML = "please click me";
    }
    connectedCallback() {
      this.onclick = () => this.wrapper.innerHTML = this.innerHTML;
    }
  });
</script>

Global CSS effect on Shadow element. Why?

It's the normal behavior of CSS styles. The elements inserted in the Shadow DOM with <content> (in your example: <span class=name>...</span>) are actually part of the normal DOM, and therefore are affected by the global CSS styles.

If you don't dont want it, you should try another technique, like copying the light DOM elements into the Shadow DOM instead of using <content>.

Also, you should use Custom Elements v1 (and customElements.define()) and Shadow DOM v1 (and <slot>) instead of Custom Elements v0 (registerElement()) and Shadow DOM v0 (<content>) which are deprecated.

With Shadow DOM v1, you can use ::slotted() inside the Shadow DOM to select and style insterted elements.

You can then overload the CSS rule in the Shadow DOM <style> with the !important modifier:

line 21:

<style>
    ::slotted( span ) {
      text-decoration: underline!important
    }
</style>

Below is the complete snippet:

//CREATE CUSTOM ELEMENTclass MyContact extends HTMLElement {  constructor() {     super()    //retrieve template    var tpl = document.querySelector('#contact-form-tpl');    var tpl_ct = document.importNode(tpl.content, true);
    //this <=> my-contact element -> create shadow    var shadowRoot = this.attachShadow( {mode:'open'}) //createShadowRoot();
    //show template in shadow DOM    shadowRoot.appendChild(tpl_ct);  }}
//REGISTER CUSTOM ELEMENTcustomElements.define("my-contact", MyContact);

span {  text-decoration: line-through}

<script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.11.0/document-register-element.js"></script><span>HELLO</span><!--line through by css at LINE 6: OK--><my-contact>  <h1 slot=header>Contact X</h1>  <span slot=name>this is my name</span>  <span slot=phone>this is my phone</span></my-contact>

<template id="contact-form-tpl">  <style>       span ::slotted( span ),     span {         text-decoration:underline!important      }  </style>  <fieldset>    <legend>      <slot name=header></slot>      <div>        Name: <span><slot name="name"></slot></span>      </div>      <div>        Phone: <slot name="phone"><span></span></slot>      </div>      <span>TEST</span><!-- only apply css at line 21: OK-->    </legend>  </fieldset></template>

How to repeat outer DOM for all the slottables in a slot?

After searching a bit about how others seem to be using web components, I've found a partially acceptable solution: using 2 web-components, instead of 1; one for the list, and one for the list items.

Or in snippet form:

window.customElements.define('x-list', class extends HTMLElement {  constructor () {    super();    const template = document.querySelector('#x-list').content;    const shadow = this.attachShadow({ mode: 'open' });    shadow.appendChild(template.cloneNode(true));  }});
window.customElements.define('x-list-item', class extends HTMLElement {  constructor () {    super();    const template = document.querySelector('#x-list-item').content;    const shadow = this.attachShadow({ mode: 'open' });    shadow.appendChild(template.cloneNode(true));  }});

<template id="x-list">  <ul>    <slot></slot>  </ul></template>
<template id="x-list-item">   <li role="listitem">     <slot>List item</slot>   </li></template>
<x-list>  <x-list-item>Item 1</x-list-item>  <x-list-item>Item 2</x-list-item>  <x-list-item>Item 3</x-list-item></x-list>

---

Related Topics