Firefox addons not supporting attachShadow yet?

Add-ons Development
#1

I’m a little bit confused on whether or not Firefox addons support the attachShadow function yet. If I read https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM 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.

Other sources:

#3

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.

Edit: Seems shady dom aren’t creating any Shadow root dom either. Same issue as here: https://github.com/webcomponents/shadydom/issues/144

Links:
https://www.polymer-project.org/2.0/docs/devguide/shadow-dom
https://raw.githubusercontent.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js

#4

Firefox addons support the attachShadow function yet. If I read https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM2 it seems that it’s the case

Nope:
image

#5

Isn’t there any other way to isolate something in Firefox as of yet?

Thanks.

#6

Firefox supports <style scoped>.
This doesn’t work with links or any other browser, though.

#7

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.

#8

Or maybe I will have to use an iframe instead…

#9

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)
  • the pages CSP disallows blob: as frame-src