I’m a little bit confused on whether or not Firefox addons support the attachShadow function yet. If I read Using shadow DOM - Web APIs | MDN it seems that it’s the case, but when I test it out with my addon, it says that “attachShadow is not a function”.
I’ve also read some pages that says that you have to enable it under your config, but would that not mean that all the users of the addon, would have to do the same? In that case, I need to find another way.
Ended up using Polymer with their webcomponents-lite.js. (shady DOM)
Not really sure if it works though, it seems the style which should be inside the shadow dom still changes the rest of the page… But the “attachShadow is not a function” error is gone.
I’ll take a look at that, but lets say a website has set styling for all div elements, will the scoped attribute then be to any help?
Kinda sucks when your extension is supposed to work with hundreds of websites, and some of them might have styling for div etc which will ruin the UI of the extension if it aint isolated… It seems there’s not much to do about that in Firefox yet, if I can’t use a shadow dom I suppose.
Ah. scoped on style tags stops the rules from leaking out.
If you want to add elements to pages that are unaffected by style rules defined by the page, you can put them inside an ifreme.
I have done that in my Wikipedia Peek extension. The current beta adds info boxes on all pages and it works quite well on most of them. There are two situations where it doesn’t:
the page styles iframe in an incompatible way (have never seen that so far)