1435165 - The ShadowDom css issue with firefox

Status: UNCONFIRMED

(Core :: Layout, defect, P3)

Description

[Basheer Ahmed]

User Agent: Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

Steps to reproduce:

I've added webcomponent pollyfill which some how fixed the JS bug but it seems to have some css issues with.


Actual results:

As of the following documentation:
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Status_in_Firefox

"A polyfilled Shadow DOM using the webcomponents.js polyfill doesn't actually encapsulate style, so the styles might bleed through. Be aware that sites built using the polyfill might look different when running in an environment that does support native Shadow DOM."

Our extension just breaks the page CSS when we were using Shadow Dom with firefox latest version.
Is there any work around for this?

Here's how it breaks the page css:
https://screenshots.firefox.com/jNYmgVkGzA0RWusu/www.cvs.com

OS: windows


Expected results:

The CSS should work with the firefox the same as it works with the chrome.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

I don't think there's any plan to encapsulate style that isn't implementing Shadow DOM. That's in progress though (if you want to enable dom.webcomponents.shadowdom.enabled and test it / report bugs / etc it'd be deeply appreciated!).

You should probably be able to use more specific selectors in your component, so that they don't conflict with the page, giving it a unique ID or something for now, sorry.

Comment 2

[Basheer Ahmed]

When the dom.webcomponents.shadowdom.enabled then we don't seems to have any issue. 

Please see the below screenshot of the page after enabling the webcomponents config:

moz-extension://ed475105-13d6-48f0-8e8d-71dedbcc74a4/fsCaptured.html

Comment 3

[Basheer Ahmed]

Sorry as the above url pasted was invalid.

Here's the valid url
https://www.screencast.com/t/7YMkrbcl9lz(In reply to Emilio Cobos Álvarez [:emilio] from comment #1)
> I don't think there's any plan to encapsulate style that isn't implementing
> Shadow DOM. That's in progress though (if you want to enable
> dom.webcomponents.shadowdom.enabled and test it / report bugs / etc it'd be
> deeply appreciated!).
> 
> You should probably be able to use more specific selectors in your
> component, so that they don't conflict with the page, giving it a unique ID
> or something for now, sorry.

Sorry for duplicate comments as the above url was just invalid.

When the dom.webcomponents.shadowdom.enabled then we don't seems to have any issue. 

Please see the below screenshot of the page after enabling the webcomponents config:
https://www.screencast.com/t/7YMkrbcl9lz

Comment 4

[Jet Villegas (inactive)]

[ Triage 2017/02/20: P3 ]