Laying the child of the shadow root in the Shadow DOM

Question

I am trying to create a child of the shadow root of the DOM.
This defines a custom element named element-el that has a span named "x" with the letter x in it, that I want the status of this question to be red.

 class El extends HTMLElement { constructor() { super(); var shadow = this.attachShadow({mode:'open'}); shadow.innerHTML = '<span class="x">X</span>'; } } customElements.define ('element-el',El); 

I tried these CSS styles:

 element-el::slotted(.x) { color:red; } element-el::host .x { color:red; } element-el:host .x { color:red; } element-el::shadow .x { color:red; } element-el /deep/ .x { color: red; } element-el::content .x { color:red; } 

X does not turn red. I am using Chrome 56 which should support this ...

I want to create a style without putting the style element inside the DOM DOM.
Here is the code: http://codepen.io/anon/pen/OpRLVG?editors=1111

EDIT:
This article shows that you can style shadow children from an external CSS file - are they just wrong?

Answer 1

Apparently, the problem is that you are trying to use global CSS to style the elements of a shadow tree.

You can use the :host pseudo-selector, however, for this you will need to put the style in the shadow tree of the content.

Make the following changes to your javascript:

 class El extends HTMLElement { constructor() { super(); var shadow = this.attachShadow({mode:'open'}); var innerHTML = ''; innerHTML += '<style>'; innerHTML += ':host(element-el.red) span {color: red}'; innerHTML += ':host(element-el.green) span {color: green}'; innerHTML += ':host(element-el.blue) span {color: blue}'; innerHTML += '</style>'; innerHTML += '<span class="x">X</span>'; shadow.innerHTML = innerHTML; } } customElements.define ('element-el',El); 

Check out the functional example in updated codepen .

Answer 2

A simple solution is to define the class x in the Dadow DOM:

 class El extends HTMLElement { constructor() { super(); this.attachShadow({mode:'open'}); .innerHTML = ` <style> .x { color: red } </style> <span class="x">X</span>`; } } customElements.define ('element-el',El); 

 <element-el></element-el> 

Note. Because of the encapsulation of the Shadow DOM style, you should always place the <style> element in the Dadow DOM using the Romulo :host solution, direct class declaration (see above), or an external style sheet .

Of course, if you use an inherited CSS property (like color ) that will be fully tied to all your shadow DOM content, you can just use plain CSS:

 class El extends HTMLElement { constructor() { super(); var shadow = this.attachShadow({mode:'open'}); shadow.innerHTML = '<span class="x">X</span>'; } } customElements.define ('element-el',El); 

 element-el { color: red; } 

 <element-el></element-el> 

Answer 3

If the el element is in shadow-dom, the following css selector should help u:

 <parent Element of shadow-root> /deep/ element-el span { color:red; } 

Select the element containing the shadow space, then use / deep / to select all the child elements, and then select the span elements.

/ deep / is not an HTML standard, but it should work in Chrome and Firefox.

Answer 4

It might help someone else in a similar situation.

In my case, I have:

 <svg class="icon"> <use xlink:href="#my-icon"></use> </svg> 

and to access the displayed icon in # shadow-root, I use:

 .icon use { fill: #f80; }