Question

我有一个自定义元素，它本身就是一个自定义元素。

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

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

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

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

我怎么能在Dart中做到这一点？

Answer 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');
  }
}

Answer 2

更新：Polymer＆gt; = 1.0.x

shady DOM

new PolymerDom(this).parentNode;

或

domHost

的缩写

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

完整影子DOM

(this.parentNode as ShadowRoot).host

@ChristopheHerreman和@MattB仍然对封装不应该被打破。

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

现在也可以在PolymerDart中使用。

Polymer.dart＆lt; = 0.16.x

(this.parentNode as ShadowRoot).host

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

2 个答案: