Access Polymer inner element programmatically

Question

I'm enclosing my app in a Polymer element and I want to use another polymer element inside it. To call all the method of the inner element I'm trying to use $[]. Insider the external polymer element I have this:

ImageEditor ime;
DivElement div2;
ImageTool.created(): super.created(){
  div2 = $["secondDiv"];
  ime = $["imageEditor1"]
}

In the Html I simply have:

<polymer-element name="da-imagetool">
<template>
<div class="images" id="mainDiv">
  <da-imageeditor id="imageEditor1" name="ied"></da-imageeditor>

with the script src at the end. For some reason I get an exception when I assign the imageEditor1 to ime.

Exception: type 'HtmlElement' is not a subtype of type 'ImageEditor' of 'value'.

Answer 1

It looks like the browser hasn't upgraded the <da-imageeditor> elements.

Make sure that you <import> the <da-imageeditor> element, and have the correct @CustomTag annotation on the ImageEditor class declaration.

Answer 2

This is most likely an issue with the import path. If you don't use the right path the type is not recognized (canonicalization problem)

This bug should be solved since a while https://code.google.com/p/dart/issues/detail?id=15953 but I haven't worked with Polymer since.

Show your import paths (HTML and Dart) and the directory structure of your app (where is your entry page and your Polymer elements) then I'll take a look.

Answer 3

Which version of dart-polymer are you using? With the 0.9.5, the following lines:

XElement.created(): super.created() { print($['el-id']); }

void enteredView() { print($['el-id']); }

In created(), the referred element gives nothing whereas in enteredView(), it does refer to the specific element of the shadow root.

The behavior disappears if shadowRoot.querySelector('#el-id') is used in lieu of the shorthand map $['el-id'].