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

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

在Dart in attached()(调用之后super.attached())this.parent为null并且我找不到对host元素的任何其他引用.

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

Answer 1

不幸的是,不保证自定义元素的创建顺序.请参阅Polymer.dart讨论和Polymer讨论组的相关讨论.

但是如上所述,您的特定用法将打破封装,使用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> = 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 <= 0.16.x

(this.parentNode as ShadowRoot).host