CODEWITHSUNDEEP
polymerweb-componentshadow-dom
ThomasReggi
ThomasReggi

Reputation: 59345

How do you access element with a custom polymer element?

Given the example element.

<my-element>
    <h1>Hello world</h1>
    <a href="/test">Test</a>
</my-element>

How would I select the href of the a tag?

Sorry I don't have more, I've been testing a whole bunch of things.

I know within the <template> if you have <content id="a-tag" select="a">. You should be able to go this.$["a-tag"] but I don't know how to access the attributes, plus then I'm stuck showing the element within the shadow DOM, which I don't want. Thoughts?

Upvotes: 0

Views: 85

Answers (2)

CletusW
CletusW

Reputation: 3980

Have you tried this.querySelector('a').href? this inside of your Polymer element methods refers to the host node (outside of Shadow DOM).

Upvotes: 1

ebidel
ebidel

Reputation: 24109

content.getDistributedNodes() will get you the list of light dom nodes going through the <content> insertion point.

So this should work if you're using <content select="a">:

content.getDistributedNodes()[0].href

Note: this.$['a-tag'] will not work . You'd need to do:

this.$['a-tag'].getDistributedNodes()[0].href

Upvotes: 2

Related Questions