finding_shadow_dom_elements

Finding shadow DOM elements

Shows how to find elements inside the shadow DOM.

The code

• my_element.dart: The Dart code for <my-element>
• my_element.html: The HTML code for <my-element>
• index.html: An HTML file that uses <my-element>

How it works

The Shadow DOM allows web designers to create UI widgets where the implementation details are encapsulated—they are not stored in the main document DOM.

Like the DOM, the shadow DOM is organized as a tree of nodes. If a node has been tagged with an id attribute, you can find it using the $['myDiv'] syntax. This Polymer feature, called automatic node finding, returns a reference to the named element.

The MyElement class (my_element.dart) defines the findNodes method.

void findNodes() {
  $['myDiv'].querySelector('p').text = 'New content';
}

This method finds the node tagged with myDiv and replaces the content of its paragraph (<p>) with the text, New content.

In the template code (my_element.html), the myDiv element includes a button.

<div id="myDiv">
  <p>Old content</p>
  <button on-tap="{{findNodes}}">Find nodes</button>
</div>

When the button is tapped, the findNode method runs, and the paragraph updates.

More information

• finding-shadow-dom-elements.html: The JavaScript version of this example