Wie kann ich auf den Host eines benutzerdefinierten Elements zugreifen?

Question

Ich habe ein benutzerdefiniertes Element, das selbst ein benutzerdefiniertes Element hostet.

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

Jetzt in attached() (oder einen anderen Rückruf) von PolymerFlexLayout Ich möchte das Klassenattribut des flex-nonvisual Element einzustellen.

In Javascript sieht der Code wie this.parentNode.host.classList.add('someclass');

In Dart in attached() (nach dem Aufruf von super.attached()) this.parent ist null und ich konnte keinen anderen Verweis auf das Host-Element finden.

Wie kann ich das in Dart tun?

Answer 1

Update: Polymer> = 1.0.x

schattigen DOM

new PolymerDom(this).parentNode; 

oder

domHost 

kurz für

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

vollen Schatten DOM

(this.parentNode as ShadowRoot).host 

---

@ChristopheHerreman und @MattB ist noch recht Verkapselung sollte nicht gebrochen werden.

Aber auch JS Polymer-Elemente greifen auf die Eltern in ihren Layout-Elementen zu, weil es in einigen Szenarien immer noch praktisch ist.

Das funktioniert jetzt auch in PolymerDart.

Polymer.dart < = 0.16.x

(this.parentNode as ShadowRoot).host 

Answer 2

Leider ist die Erstellungsreihenfolge der benutzerdefinierten Elemente nicht garantiert. Siehe die Polymer.dart discussion und die zugehörige Diskussion auf der Polymer discussion groups.

Wie bereits erwähnt, wird Ihre spezielle Verwendung die Kapselung unterbrechen und die Verwendung von CustomEvents ist viel mehr der Weg zu gehen. Und mit Polymer ist dies sehr einfach zu implementieren.

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