Clever Geek Handbook

HTML5 - ShadowDOM Style Elements Using External CSS File in Firefox Browser

I am trying to create a custom HTML element using HTML 5. The problem is that I am unable to style the Shadow DOM elements exposed using external CSS. The code works in Chrome browser but not Firefox.

HTML code:

<!doctype html>
<html>
    <head>
        <title>HTML5 | Custom Elements</title>
        <link type="text/css" rel="stylesheet" href="simple-elem.css">
        <script type="text/javascript" src="simple-elem.js"></script>
    </head>
    <body>
        <simple-element></simple-element>
    </body>
</html>

JS code:

var proto = Object.create(HTMLElement.prototype);

proto.createdCallback = function() {

    console.log('Element creation started...');

    var inputTextElement = document.createElement('input');
    inputTextElement.type = 'text';
    inputTextElement.className = 'simpleElem';

    // Shadow DOM root
    var shadowRoot = this.createShadowRoot();

    shadowRoot.appendChild(inputTextElement);

    console.log('Element creation ended...');

};

var SimpleElement = document.registerElement('simple-element', { prototype: proto });

CSS code:

simple-element {
}

simple-element::shadow  .simpleElem {
    height: 30px;
    margin: 0px;
    padding: 0px;
    width: 180px;
}

Can't figure out what's wrong with Firefox. Help is needed.

+3


source to share


2 answers


Firefox does not have Shadow DOM support yet, see CanIUse.com . I recommend sticking with Chrome. EDIT: FF Nightly has some support , it can be manually enabled.



+2


source


As noted by Gábor Imre , Shadow DOM is not included by default in Firefox as it is still in development. However, you can use a polyfill to get pretty good Shadow DOM behavior in all browsers that don't support it. If you do, you will need to use polyfill-next-selector

to get the behavior you want .



+1


source






More articles:


All Articles