2

Let's say you create two custom elements. Each creating a shadow dom. Now you want to select a dom element inside one of these custom elements FROM THE OUTSIDE (I know I could just put my CSS into the custom Elements, but I don't want to do that in this specific case).

In theory this should work without any problem and it works in Firefox and Edge but it doesn't in Chrome (normally it's the other way around). See the following example:

inner-element {
  color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/webcomponents-bundle.js"></script>
<script>
  class InnerElement extends HTMLElement {
    connectedCallback() {
      const shadow = this.attachShadow({
        mode: 'open'
      });

      shadow.innerHTML = "<h1>Inner</h1>";
    }
  }
  window.customElements.define('inner-element', InnerElement);

  class OuterElement extends HTMLElement {
    connectedCallback() {
      const shadow = this.attachShadow({
        mode: 'open'
      });

      shadow.innerHTML = "<h1>Outer</h1><inner-element></inner-element>";
    }
  }

  window.customElements.define('outer-element', OuterElement);
</script>
<outer-element></outer-element>

Does anyone know how my CSS should look like to make it work in all current major browsers?

Domenic
  • 708
  • 1
  • 9
  • 23
  • Firefox doesn't support customElements nor shadow API, that's why it works there (because your polyfill didn't really *shadowed* the inner elements.) – Kaiido Jul 21 '18 at 13:41
  • yes that's true. it's just a polyfill and in firefox the element doesn't get shadowed. However, according to Googles documentation it should work (https://developers.google.com/web/fundamentals/web-components/shadowdom "Styling a component from the outside"). – Domenic Jul 21 '18 at 15:42
  • but yeah, I'm not saying I know the answer and I did everything correctly. That's the reason I'm asking... – Domenic Jul 21 '18 at 15:43
  • 1
    *Styling a **component** from the outside*, not shadowDOM, which has a *Scoped CSS* and thus can't be styled from the outside. – Kaiido Jul 21 '18 at 15:50
  • So you‘re saying I‘m asking for something completely impossible? – Domenic Jul 21 '18 at 15:51
  • Well... What can be done is also in the link you do provide, i.e custom-properties a.k.a *CSS --variables*. – Kaiido Jul 21 '18 at 15:52
  • ok, but that‘s only useful for some specific attributes. not really what I‘m looking for. What happened to /deep/ ? – Domenic Jul 21 '18 at 15:55
  • 1
    Got removed from specs in v1, without substitution. Maybe you are after `@import`ing a stylesheet instead? (Though IIRC this has severe perf drawbacks). Or an other solution would be to not use Shadow at all, and leave it all just as components. – Kaiido Jul 21 '18 at 15:57

0 Answers0