CODEWITHSUNDEEP
htmldartdart-polymershadow-dom
Marc Byfield
Marc Byfield

Reputation: 510

How to query the Input field of a Paper Input element in dart

So, I'm trying to access the input field hidden deep within a paper input field. This is so that I can change the input type and so on. After inspecting the element, You can see that it has 2 shadow roots as explained in this blog. However, the method explained in that blog no longer works. I'm using dart version 1.5.3, polymer 0.12.0-dev.

I try to query the paper input like so:

querySelector('#paper-input-id').shadowRoot.querySelector('#input');

However, that returns null. This is because the shadowRoot property only returns the first shadow root. The input field is buried in the second shadow root. I guess what I am asking is if there is a generic way to select the nth-shadow root of an element?

Upvotes: 2

Views: 472

Answers (2)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657338

This seems exactly how I did it in the unit test for <core-input>

var input = dom.document.querySelector("#changeAndInputEvent") as CoreInput;
var domInput = (input.shadowRoot.olderShadowRoot.querySelector('#input') as dom.InputElement);

what also should work is 

var domInput = (dom.document.querySelector("#changeAndInputEvent /deep/ #input");

or 

var domInput = (dom.document.querySelector("* /deep/ #changeAndInputEvent /deep/ #input");

when the paper-input itself is inside a shadow-dom

Upvotes: 2

CletusW
CletusW

Reputation: 3980

Instead of using shadowRoot and olderShadowRoot, which may change if for whatever reason paper-input decides to inherit something new that then inherits from core-input, try using the more generic shadowRoots map (note the 's'):

querySelector('#paper-input-id').shadowRoots['core-input'].querySelector('#input');

Upvotes: 1

Related Questions