CODEWITHSUNDEEP
dartdart-polymer
Rainer Friederich
Rainer Friederich

Reputation: 33

Accessing htmlElement in ShadowDom in Dart Polymer

i'm quite new to Dart and Polymer and have a question i couldn't find an answer for.

I'm writing a simple single page application and want to access a buttonElement in the shadowDom of a polymer element. ( SDK 1.0 and Polymer 0.9.3, Dart Stable Version )

Like i understood from the docs and api i should use :

@override
void enteredView() {
  super.enteredView();
  submitButton = $['submitButton'];
  submitButton.disabled = true;
}

Now heres my html :

<polymer-element name="..." attributes="..." >
  <template>
    ...
    <template repeat="{{ ... in ... }}">
      ...
    </template>
    <template if="{{...}}">
      ...
      <button id="submitButton" on-click="{{...}}">...</button>
    </template>
  </template>
</polymer-element>

In this template, when i print out $['submitButton'] at the end of enteredView method i get null.

BUT : when i change my html template and dont put the button in a nestend template tag :

<polymer-element name="..." attributes="..." >
  <template>
    ...
    <template repeat="{{ ... in ... }}">
      ...
    </template>
    <template if="{{...}}">
      ...
    </template>
    <button id="submitButton" on-click="{{...}}">...</button>
  </template>
</polymer-element>

i get my button and can work with it. Otherwise the last call in enteredView ( button.disabled ) throws an error.

Can anyone help me with that ? what am i doing wrong ?

Thanks in advance.

EDIT :

Just enabling / disabled the button can be done using a special expression in Dart for the disabled attribute.

<button disabled?="{{buttonDisabled}}">

This will result in removing and adding the disabled attribute. Finding the Element in a if or repeat template still doesn't work like that.

Upvotes: 3

Views: 267

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658263

Accessing elements inside <template repeate="..."> or template if="..."> doesn't work yet using the $['id'] method.
There was a discussion about this recently in the Dart group. I thought there should be a feature request too but was not yet able to find them.

I'm not sure if shadowRoot.querySelector('#id') works.

If not then AFAIK the only option is MutationObserver like here dart-polymer-dart-examples / web / mutation_observers / as you can't access an element before it was inserted into the DOM.

Edit:

Upvotes: 0

Related Questions