class based css styling for polymer's shadow dom elements

2
votes

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

2
javascriptcsspolymer
@Dilip stop suggesting jQuery everywhere... - Eugene P.
@EugeneP. My bad. Didn't read question properly. - Dilip
haha we all done that before ^^ - zen

2 Answers

3
votes

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')
2
votes

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