Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible query all elements including shadow dom with Polymer?

For example, lets say we want to do querySelectorAll('canvas') to get all canvases in the document, including the ones in the shadow dom. Is that possible with polymer?

like image 527
user2935300 Avatar asked Jul 17 '14 21:07

user2935300


People also ask

How do you inspect shadow DOM elements?

To access these Shadow DOM elements, we need to use the JavascriptExecutor executeScript() function. If you look at the DOM structure, every element that includes Shadow DOM also has a shadowRoot property that describes the underlying elements.

What is shadow DOM in polymer?

Shadow DOM is a new property of DOM used for building components. Example. In the following code, the header component includes page title and menu button. <header-demo> <header> <h1> <button> Shadow DOM allows locating the children in a scoped subtree, which is known as shadow tree.

Which selector can work for shadow DOM elements?

There's no selector that can directly affect shadow DOM styles from the document. But just as we expose methods to interact with our component, we can expose CSS variables (custom CSS properties) to style it. Custom CSS properties exist on all levels, both in light and shadow.


1 Answers

No. For a period of time there was a proposal whereby you could use the /deep/ combinator, but it was found to be bad for encapsulation and has been deprecated. Code that relies upon it will break.

Instead, if you need to, you can take an element and look into its shadow root specifically and query within it.

like image 54
Peter Burns Avatar answered Oct 16 '22 09:10

Peter Burns