CODEWITHSUNDEEP
javascriptfirefoxweb-componentshadow-domhtml5-template
Mathieu Mahé
Mathieu Mahé

Reputation: 2746

Compatibility of shadowdomv1 on firefox

I'm trying to use ShadowDomv1 (with https://github.com/webcomponents/webcomponentsjs and https://github.com/webcomponents/shadycss) but it's not working.

The ShadowDom by itself works, but the css is not encapsulated (as we can see with the h2 css rule).

It works as intended on Chrome and Safari (but they both support ShadowDomv1 natively).

Am I missing something or is it impossible ?

Here the jsbin : http://jsbin.com/maqohoxowu/edit?html,output

And the code :

<script type="text/javascript" src="https://rawgithub.com/webcomponents/webcomponentsjs/master/webcomponents-hi-sd-ce.js"></script>
<style type="text/css">
    h2 {
        color: red;
        border-bottom: 1px black dotted;
    }
</style>
<h2>h2 red and dotted</h2>

<my-element>
</my-element>

<template id="myElementTemplate">
    <style scope="my-element">
        h2 {color: blue}
    </style>
    <div>
        <h2>h2 blue and not dotted !</h2> <!-- Should not be dotted because of the encapsulation -->
    </div>
</template>

<script type="text/javascript">
    ShadyCSS.prepareTemplate(myElementTemplate, 'my-element');

    class MyElement extends HTMLElement {
        connectedCallback() {
            ShadyCSS.styleElement(this);

            if (!this.shadowRoot) {
                this.attachShadow({mode: 'open'});
                this.shadowRoot.appendChild(document.importNode(myElementTemplate.content, true));
            }
            ShadyCSS.styleElement(this);
        }
    }

    customElements.define("my-element", MyElement);
</script>

Upvotes: 1

Views: 225

Answers (3)

Intervalia
Intervalia

Reputation: 10945

The polyfill can not emulate the encapsulation of CSS that is handled natively by true ShadowDOM.

Instead, if you plan to use both then avoid using simple CSS selectors. Instead try using a CSS naming pattern like BEM: http://getbem.com/introduction/

This will allow your CSS to work, most of the time, in either true ShadowDOM and in ShadyDOM.

Upvotes: 0

Supersharp
Supersharp

Reputation: 31181

You could use the CustomStyleInterface to apply document level styles only to non Shadow DOM:

const CustomStyleInterface = window.ShadyCSS.CustomStyleInterface;
CustomStyleInterface.addCustomStyle(document.querySelector('style.doc-level'));

class MyElement extends HTMLElement {
  connectedCallback() {
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.appendChild(document.importNode(myElementTemplate.content, true));
  }
}

customElements.define("my-element", MyElement);
<script src="https://rawgithub.com/webcomponents/webcomponentsjs/master/webcomponents-hi-sd-ce.js"></script>
<script src="https://rawgit.com/webcomponents/shadycss/master/custom-style-interface.min.js"></script>

<style class="doc-level">
  h2 {
    color: red;
    border-bottom: 1px black dotted;
  }
</style>

<h2>h2 red and dotted</h2>

<my-element></my-element>

<template id="myElementTemplate">
    <style>
        h2 {color: blue}
    </style>
    <div>
        <h2>h2 blue and not dotted !</h2> 
    </div>
</template>

Upvotes: 1

Stefan Reimers
Stefan Reimers

Reputation: 379

As per Mozillas platform status page, Shadow DOM is still under development. https://platform-status.mozilla.org/#shadow-dom

Upvotes: 0

Related Questions