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

【问题标题】：Does a Dart WebComponent have access to its DOM elementDart WebComponent 是否可以访问其 DOM 元素
【发布时间】：2013-06-26 18:45:48
【问题描述】：

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

【问题讨论】：

标签： dart dart-webui

【解决方案1】：

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

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

【讨论】：

和 'x-some-component' 是 HTML 元素的 id？这与查询（'x-some-component'）有什么不同？这是否意味着我必须将该 ID 存储在某个地方？
不，x-some-component 是元素名称（WebUI example 中的 x-click-counter）。 Query 将遍历 DOM 并找到具有匹配 ID/类的节点，而 getShadowRoot() 会自动返回相应的节点。考虑一个在单击时将其颜色更改为红色的组件。现在将其中两个组件添加到页面中。使用查询，第一个组件将始终更改颜色，无论您单击第一个组件还是第二个组件。使用getShadowRoot()，改变颜色的组件将是你点击的那个。

【解决方案2】：

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

一些旧代码依赖于_root，但不要使用它，因为它已被弃用并且即将消失。 getShadowRoot() 也更适合在 IDE 中自动完成。

这是你应该做的：

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

【讨论】：

请查看对 Pixel Elephant 回答的评论。
@brooks94 你不需要存储任何东西。 x-your-element 只是 Web 组件的名称，例如：<element name="x-your-element" ...>。

【解决方案3】：

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

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

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

【讨论】：