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

Question

在我扩展 WebComponent 的类中，是否有一种标准方法可以访问表示该实例根的 DOM 元素？

Answer 1

是的，您可以使用 getShadowRoot()：

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

Answer 2

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

一些旧代码依赖于_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";
}

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