How can I access the host of a custom element

Unfortunately creation order of custom elements is not guaranteed. See the Polymer.dart discussion and the Related discussion on the Polymer discussion groups.

However as mentioned, your particular usage will break encapsulation and using CustomEvents is much more the way to go. And using Polymer this becomes very easy to implement as well.

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

update: Polymer >=1.0.x

shady DOM

new PolymerDom(this).parentNode;

or

domHost

short for

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

full shadow DOM

(this.parentNode as ShadowRoot).host

@ChristopheHerreman and @MattB are still right about encapsulation should not be broken.

But also JS Polymer elements access the parent in their layout elements because it's still convenient in some scenarios.

This works now in PolymerDart too.

Polymer.dart <= 0.16.x

(this.parentNode as ShadowRoot).host