Support for Shadow DOM styling

[trevordmiller]

When trying to use the /deep/ Shadow DOM selectors for Web Components, the libsass compiler throws an error:

Warning: /Users/trevordmiller/Sites/github/frontendtv.github.io/app/styles/main.scss:41: error: invalid top-level expression

Can support be added for Shadow DOM / Web Components / Polymer related selectors like /deep/, ::shadow and ':host` etc.?

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/

[matthiasbayer]

Any news on this issue?

[HamptonMakes]

Can you please give a test case or example of this code that you want to work, and how you'd expect it to behave?

[malrase]

Using /deep/ definitely breaks libsass:
http://sassmeister.com/gist/abebd8016d9a9e9caccb

However, using ::shadow and :host seems to be OK?
http://sassmeister.com/gist/d3869019da2eb39d9fcc

I'll add a test-case for /deep/, though.

[malrase]

D'oh, someone's already added the test:
https://github.com/sass/sass-spec/tree/master/spec/libsass-todo-issues/issue_452

The "needs test" tag can be removed.

[xzyfer]

For reference this is the Selectors Level 4 Reference combinator

[john-landgrave]

Any movement on this? Or can anyone point me at the general place to step in to making this change myself?

[xzyfer]

I'd started work on this bug haven't come back around to it.

It required a decent amount of changes to how we handle selectors. The proper fix for this will also address some other issues. i.e. #593

[peterblazejewicz]

👍

[hackingbeauty]

Can this please get fixed and merged? I'm not able to use libsass in my Polymer project.

[peterblazejewicz]

ref: https://sass-compatibility.github.io/#shadow_dom_styling

[Panya]

BTW /deep/ was changed to >>> (http://dev.w3.org/csswg/css-scoping-1/#deep-combinator)

[JosefJezek]

https://code.google.com/p/chromium/issues/detail?id=446051

[mgreter]

@xzyfer I'm confused. The spec test seems to be passing!? Can this be closed again?

[xzyfer]

This can be closed. It has been fixed in 3.3.

[mgol]

/deep/ is deprecated. Only Chrome has implemented it and it plans to remove it soon (just see the console on the new tab page in Chrome Canary). They've tried to change the combinator from /deep/ to >>> but no form has been accepted by other browser vendors and it will most likely be removed from the spec.

In any case, current version of the spec says about >>>, not /deep/.

Does libsass still plan to support this obsolete selector?

[xzyfer]

Thanks we're aware, however it's a part of a spec, code exists with it that
we need to support and most importantly Ruby Sass supports so we must also.
On 17 Jul 2015 17:45, "Michał Gołębiowski" [email protected] wrote:

/deep/ is deprecated. Only Chrome has implemented it and it plans to
remove it soon (just see the console on the new tab page in Chrome Canary).
They've tried to change the combinator from /deep/ to >>> but no form has
been accepted by other browser vendors and it has been removed from the
spec.

—
Reply to this email directly or view it on GitHub
#452 (comment).