How can I style elements used to construct custom elements?

Question

class MyElement extends HTMLElement {
    constructor() {
        super()
        const shadow = this.attachShadow({mode: 'open'})
        shadow.appendChild(document.createTextNode('Yadda blah'))
        const span = document.createElement('span')
        span.appendChild(document.createTextNode('Can I style U?'))
        shadow.appendChild(span)
    }
}
customElements.define('my-element', MyElement)

my-element {
    border: 1px solid black;
}

span {
    font-weight: bold;
}

<my-element></my-element>

As you can see, my-element is styled, however, the span used within my-element is not. Not even saying my-element span {font-weight: bold;} in the stylesheet makes any styles effective.

Is there any way to apply styles to this span?

@CertainPerformance Thank you for your edit however, I think I prefer 4 spaces intendation :) — , Jan 13 '19 at 03:27
Sure, was just trying to fix the initial inconsistent spacing — CertainPerformance, Jan 13 '19 at 03:29
Voting to reopen, I think the OP wants to style `span` from *within* his custom element. Is that right @gaazkam? — nicholaswmin, Jan 13 '19 at 03:31
The duplicate referrer sends you on a wild goose chase past deprecated ``::shadow`` answers and multiple blog referrals , **For example see:** http://jsfiddle.net/dannye/z8g1v532/ for better 'duplicate answer' see: https://stackoverflow.com/questions/52162732/how-to-style-root-without-important-using-proper-specificity — Danny '365CSI' Engelman, Jan 13 '19 at 10:06
Possible duplicate of [Override styles in a shadow-root element](https://stackoverflow.com/questions/47625017/override-styles-in-a-shadow-root-element) — Supersharp, Jan 14 '19 at 01:16

score 1 · Answer 1 · answered Jan 14 '19 at 03:17

That is the expected behavior of shadow dom. Since your HTML looks like <my-element></my-element>, you can target my-element from your css, but the span is not part of the actual dom, so you can't target it.

You can only apply styles to the span from within the shadow dom context.

There are better ways of defining css in this case, but just to make a point, the following apply styles to the span, but not to my-element:

class MyElement extends HTMLElement {
    constructor() {
        super()
        const shadow = this.attachShadow({mode: 'open'})
        shadow.appendChild(document.createTextNode('Yadda blah'))
        const span = document.createElement('span')
        span.appendChild(document.createTextNode('Can I style U?'))
        shadow.appendChild(span)
        const styleTag = document.createElement('style')
        styleTag.innerHTML = `
            my-element {
                border: 1px solid black;
            }
            span {
                font-weight: bold;
            }
        `
        shadow.appendChild(styleTag)
    }
}
customElements.define('my-element', MyElement)

<my-element></my-element>

Yes, place the CSS in the shadow DOM. I would also suggest that you don't use `my-element {` instead use `:host {` -- https://devdocs.io/css/:host — Intervalia, Jan 14 '19 at 16:52
Note that slots might not do what you expect: http://jsfiddle.net/dannye/5n9cjbpu/ — Danny '365CSI' Engelman, Jan 16 '19 at 10:11

rovyko · Answer 2 · 2019-02-20T02:03:44.013

You have to apply the style to the shadow DOM. A common but soon-to-be-outdated technique is to add a <style> element to the shadow DOM and set its text contents as the CSS you want to apply within the custom element.

The snippet below does just that. The style is saved to a variable, but you can place it anywhere as long you're conscious of how often its context is run. Following Intervalia's advice, it's best to apply a style to the custom element using :host.

It's also possible to add a <link> element instead, but that may cause the element to pop-in without a style (FOUC)

const myElementStyle = `
:host {
    border: 1px solid black;
}
span {
    font-weight: bold;
}
`

class MyElement extends HTMLElement {
    constructor() {
        super()
        const shadow = this.attachShadow({mode: 'open'});
        const style = document.createElement('style');
        style.textContent = myElementStyle;
        shadow.appendChild(style);
        
        shadow.appendChild(document.createTextNode('Yadda blah'));
        const span = document.createElement('span');
        span.appendChild(document.createTextNode('Can I style U?'));
        shadow.appendChild(span);
    }
}
customElements.define('my-element', MyElement)

<my-element></my-element>

Another option is to use Constructable Stylesheets, which should soon be available in modern browsers. These let you create a stylesheet object that can embed styles or import styles from external resources.

I wrote up an answer here, so I'll just post a snippet that answers your question:

const customSheet = new CSSStyleSheet();
customSheet.replaceSync(`
:host {
  border: 1px solid black;
}
span {
  font-weight: bold;
}
`);

class MyElement extends HTMLElement {
  constructor() {
    super()
    const shadow = this.attachShadow({
      mode: 'open'
    })

    shadow.adoptedStyleSheets = [customSheet];

    shadow.appendChild(document.createTextNode('Yadda blah'))
    const span = document.createElement('span')
    span.appendChild(document.createTextNode('Can I style U?'))
    shadow.appendChild(span)
  }
}
customElements.define('my-element', MyElement)

<my-element></my-element>

How can I style elements used to construct custom elements?

2 Answers2