CODEWITHSUNDEEP
polymerweb-componentshadow-dom
evaneus
evaneus

Reputation: 759

Cannot add ::after pseudo-element to slotted element in shadow dom

I was experimenting with Eric Bidelman's <fancy-tabs> shadow dom example: https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

And was trying to add Material Design styling to it, which would require adding an :after pseudo element to the tabs.

After some experimentation I found that the internal styles for applying pseudo elements do appear to work when using Polymer, but not when using vanilla JS...

Polymer example: https://jsbin.com/maqaze/edit?html,output

Vanilla JS example:

In this second example, applying the :after pseudo element does not work within the shadow dom <style> it apparently needs to be set externally.

https://jsbin.com/toxalu/edit?html,output

So my question is, how should you go about adding a pseudo element to a slotted / light dom element, without needing to use external styles?

(have tried these examples on Chrome and Safari)

Upvotes: 2

Views: 1235

Answers (1)

Supersharp
Supersharp

Reputation: 31171

If it seems to work in Polymer it's due to the fact that Polymer 1.0 doesn't really use native ::slotted pseudo-elements.

In fact Polymer uses native Shadow DOM "v0" and converts ::slotted to ::content. You can see it in the Dev Tools.

As you have noted you can add ::after pseudo-elements from the outside.

I suppose pseudo-elements are considered as complex selectors and therefore are not supported within ::slotted().

Upvotes: 1

Related Questions