Dart WebComponent是否可以访问其DOM元素

Question

在扩展WebComponent的类中，是否有一种标准方法来访问代表此实例根的DOM元素？

Answer 1

是的，您可以使用getShadowRoot（）：

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

Answer 2

有两种方法。首先是使用_root。第二种选择是使用Pixel Elephant提到的getShadowRoot()。

某些旧代码依赖于_root，但不使用它，因为它已被弃用并且正在消失。 getShadowRoot()也可以更好地在IDE中自动完成。

这是你应该做的：

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

Answer 3

我不知道这是否是一个很好的方法， 但我使用这样的东西：

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

此代码符合影子dom和标准方式。