Angular elements - Element.createShadowRoot deprecation

Question

I'm testing Anuglar Elements to create some web components and is working great. Anyways I'm getting this warning in console:

[Deprecation] Element.createShadowRoot is deprecated and will be removed in M73, around March 2019. Please use Element.attachShadow instead. See https://www.chromestatus.com/features/4507242028072960 for more details.

Related file is platform-browser.js:1182. Is something I should be aware of? How can i fix it? Should I search an alternative way to create my web components?

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

According to MDN Web docs this feature is going to be removed completely. In any case it's not supported by most of the web browsers:

Non-standard

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Deprecated

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

If you're using Angular i'd suggest using Dynamic Component Loader

score 0 · Answer 2 · answered Jun 18 '19 at 07:48

As the error states you will have to use

Element.attachShadow instead.

Example:

class SomeElement extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({mode: 'open'});
    }

    connectedCallback() {
        this.shadowRoot.innerHTML = 'Hello World!';
        console.log(this.shadowRoot);
    }
}

customElements.define('some-element', SomeElement);

The mode defines if you can access the shadow root through JavaScript.
For {mode: 'closed'} the code in the connectedCallback won't work since this.shaodwRoot returns null.

Angular elements - Element.createShadowRoot deprecation

2 Answers2