6

カスタム要素をホストするカスタム要素があります。

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

今attached()（または他のコールバック）で、要素PolymerFlexLayoutのクラス属性を設定したいと思います。flex-nonvisual

Javascript では、コードは次のようになりますthis.parentNode.host.classList.add('someclass');

Dart in attached()(の呼び出し後super.attached())this.parentは null で、ホスト要素への他の参照が見つかりませんでした。

Dartでこれを行うにはどうすればよいですか?

4

2 に答える 2

7

残念ながら、カスタム要素の作成順序は保証されていません。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');
  }
}
于 2013-11-14T14:50:10.700 に答える
6

更新: ポリマー >=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
于 2014-03-04T10:07:32.580 に答える