How can I access the host of a custom element

Question

I have a custom element which itself hosts a custom element.

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

Now in attached() (or some other callback) of PolymerFlexLayout I want to set the class attribute of the flex-nonvisual element.

In Javascript the code looks like this.parentNode.host.classList.add('someclass');

In Dart in attached() (after the call to super.attached()) this.parent is null and I couldn't find any other reference to the host element.

How can I do this in Dart?

Answer 1

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

Answer 2

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