What is the alternative for Element.createShadowRoot()?

Question

I'm using this piece of code:

function setShadowDOM(i, css){
    [].forEach.call(document.getElementsByTagName(i), function(hostVal) {
        var _root = hostVal.createShadowRoot();
            _root.innerHTML = '<style>:host ' + css + '</style><content></content>';
    })
}

I'm also reading this.

How to solve this? What would be the alternative?

Answer 1

Now you can use attachShadow() instead of createShadowRoot():

• It is implemented natively in Chrome (53+), Opera (40+), Safari (10+), and Firefox (63+).

• There's also a polyfill by the webcomponents.js team: ShadyDOM.

The Shadow DOM v1 is a DOM Living Standard.

Edge will soon adopt the Chromium engine, then it will be Shadow DOM v1 compliant.