如何访问自定义元素的主机答案

【问题标题】：How can I access the host of a custom element如何访问自定义元素的主机
【发布时间】：2013-11-27 10:25:39
【问题描述】：

我有一个自定义元素，它本身承载一个自定义元素。

<polymer-element name="flex-nonvisual">
  <template>
    <polymer-flex-layout></polymer-flex-layout>
  </template>
</polymer-element>

现在在PolymerFlexLayout 的attached()（或其他一些回调）中，我想设置flex-nonvisual 元素的类属性。

在 Javascript 中，代码看起来像 this.parentNode.host.classList.add('someclass');

在attached() 中的 Dart 中（在调用 super.attached() 之后）this.parent 为空而且我找不到对宿主元素的任何其他引用。

我如何在 Dart 中做到这一点？

【问题讨论】：

一个小评论：我会考虑这种不好的做法，因为它破坏了聚合物柔性布局组件的封装。一般来说，子组件不应该在父组件上设置属性或调用方法。孩子应该调度一个父母可以监听的事件并决定改变自己的属性。
你说得对，我没有考虑其他方法。我目前正在从 Javascript 移植聚合物元素，并尝试在 Dart 中做同样的事情，就像他们在 JS 中所做的一样。非常感谢您在盲道中提供的帮助；-)。

标签： custom-controls dart polymer dart-polymer shadow-dom

【解决方案1】：

很遗憾，自定义元素的创建顺序无法保证。请参阅Polymer.dart discussion 和Polymer discussion groups 上的相关讨论。

但是，如前所述，您的特定用法会破坏封装，而使用 CustomEvents 是更可行的方法。并且使用 Polymer，这也变得非常容易实现。

<!-- flex_nonvisual.html file -->

<polymer-element name="flex-nonvisual">
  <template>
    <polymer-flex-layout on-ready="{{layoutReady}}"></polymer-flex-layout>
  </template>
</polymer-element>

// polymer_flex_layout.dart file

@CustomTag('polymer-flex-layout')
class PolymerFlexLayout extends PolymerElement {
  // other stuff here
  void attached() {
    super.attached();
    dispatchEvent(new CustomEvent('ready'));
  }
}

// flex_nonvisual.dart

@CustomTag('flex-nonvisual')
class FlexNonvisual extends PolymerElement {
  // Other stuff here
  void layoutReady(Event e, var details, Node node) {
    this.classes.add('someclass');
  }
}

【讨论】：

非常感谢。我认为你和克里斯托夫是绝对正确的。

【解决方案2】：

更新：聚合物 >=1.0.x

阴暗的 DOM

new PolymerDom(this).parentNode;

或

domHost

缩写

Polymer.dom(this).getOwnerRoot().host

全阴影 DOM

(this.parentNode as ShadowRoot).host

@ChristopheHerreman 和@MattB 关于封装不应该被破坏仍然是正确的。

但 JS Polymer 元素也可以在其布局元素中访问父级，因为在某些情况下它仍然很方便。

这现在也适用于 PolymerDart。

Polymer.dart

(this.parentNode as ShadowRoot).host

【讨论】：