CODEWITHSUNDEEP
javascriptcsspolymer
zen
zen

Reputation: 357

class based css styling for polymer's shadow dom elements

I am trying to add styles to my shadow DOM elements using JavaScript. I am aware that you can select each element via their id by using this.$.elementID, but are there methods to select the element via its class properties?

Thanks

Upvotes: 2

Views: 646

Answers (2)

Pankaj Parashar
Pankaj Parashar

Reputation: 10232

There is an option to access Shadow DOM directly using,

this.shadowRoot.querySelector('.classname');

Otherwise, as @Eugene suggested, add an identifier (#container) to the custom element and then use,

this.$.container.querySelector('.classname');

Additional information,
- https://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding

Upvotes: 2

Eugene P.
Eugene P.

Reputation: 2625

I would say $.elementID is a syntax sugar, kind of...

There is no way how to select element by class name like $.classname as it does not have any sense to be honest, because classname might not be unique.

have root id set in your template and then use following: 

this.$.elementID.querySelector('.classname')

Upvotes: 3

Related Questions