Does a Dart WebComponent have access to its DOM element

Question

Inside my class that extends WebComponent, is there a standard way to access the DOM element that represents the root of this instance?

Answer 1

Yes, you can use getShadowRoot():

getShadowRoot('x-some-component').style.color = '#F00';

Answer 2

There are two ways. First is to use _root. The second option is to use getShadowRoot() as mentioned by Pixel Elephant.

Some old code relies on _root, but don't use it, because it's being deprecated and is going away. getShadowRoot() will be better for auto completion in IDE as well.

This is what you should do:

getShadowRoot('x-your-element').classes.add('your-element');

Answer 3

I don't know if it's a good way to do this,
But I use something like this:

inserted() {
  var root = shadowRoot != null? shadowRoot: this;
  var element = root.query("something in the webcomponent dom");
  element.text = "Hello from webcomponent";
}

This code is compliant with both shadow dom and standar way.