如何訪問自定義元素的主機

我有一個自定義元素，它自己託管自定義元素。如何訪問自定義元素的主機

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

在鏢attached()（後調用super.attached()）this.parent爲空，我無法找到任何其他參考host元素。

如何在Dart中做到這一點？

來源

2013-11-14 Günter Zöchbauer

小備註：因爲它打破了聚合物柔性佈局組件的封裝，我會考慮這個壞習慣。通常，子組件不應該在父級上設置屬性或調用方法。孩子應派遣家長可以收聽的事件並決定更改自己的特性。 –

你說得對，我沒有考慮替代方法。我目前正在從Javascript中移植聚合物元素，並試圖在Dart中做同樣的事情，他們在JS中做了什麼。非常感謝您在盲道上的幫助;-)。 –

更新：聚合物> = 1.0.x的

背陰DOM

new PolymerDom(this).parentNode;

或

domHost

簡稱

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

充滿陰影DOM

(this.parentNode as ShadowRoot).host

@ChristopheHerreman和@MattB仍然說得對，封裝不應該被打破。

但是JS聚合物元素也在其佈局元素中訪問父元素，因爲在某些場景中它仍然很方便。

這也適用於PolymerDart。

Polymer.dart < = 0.16.x

(this.parentNode as ShadowRoot).host

來源

2014-03-04 10:07:32

不幸的是，自定義元素的創建順序不能保證。請參閱Polymer.dart discussion和關於Polymer discussion groups的相關討論。

但是，如上所述，您的特定用法會破壞封裝並使用CustomEvents更加順利。使用聚合物，這也變得非常容易實施。

<!-- 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-14 14:50:10

非常感謝。我想你和Christophe是絕對正確的。 –

如何訪問自定義元素的主機

回答

相關問題