New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for Shadow DOM styling #452

Closed
trevordmiller opened this Issue Jul 26, 2014 · 17 comments

Comments

Projects
None yet
@trevordmiller

trevordmiller commented Jul 26, 2014

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

This comment has been minimized.

matthiasbayer commented Sep 25, 2014

Any news on this issue?

@hcatlin hcatlin added the Bug - Maybe label Oct 3, 2014

@hcatlin

This comment has been minimized.

Member

hcatlin commented Oct 3, 2014

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

This comment has been minimized.

malrase commented Oct 6, 2014

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

This comment has been minimized.

malrase commented Oct 6, 2014

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

This comment has been minimized.

Contributor

xzyfer commented Oct 15, 2014

For reference this is the Selectors Level 4 Reference combinator

@john-landgrave

This comment has been minimized.

john-landgrave commented Nov 26, 2014

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

@xzyfer

This comment has been minimized.

Contributor

xzyfer commented Nov 26, 2014

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

silentHoo added a commit to silentHoo/polymer-survey-app that referenced this issue Jan 15, 2015

@peterblazejewicz

This comment has been minimized.

peterblazejewicz commented Jan 21, 2015

👍

@hackingbeauty

This comment has been minimized.

hackingbeauty commented Jan 23, 2015

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

@peterblazejewicz

This comment has been minimized.

@Panya

This comment has been minimized.

Panya commented Jan 27, 2015

@amannn amannn referenced this issue Feb 2, 2015

Closed

Gulp support #127

24 of 24 tasks complete
@JosefJezek

This comment has been minimized.

@hcatlin hcatlin changed the title from Support for Shadow DOM styling to Support for Shadow DOM styling [$5] Feb 21, 2015

@hcatlin hcatlin added the bounty label Feb 21, 2015

@JosefJezek JosefJezek referenced this issue Feb 25, 2015

Closed

Replace Ruby Sass with LibSass #2

0 of 1 task complete

mgreter added a commit to mgreter/libsass that referenced this issue Mar 28, 2015

@xzyfer xzyfer removed the Bug - Maybe label Mar 31, 2015

@mgreter mgreter modified the milestones: 3.2.1, 3.2 Mar 31, 2015

@mgreter mgreter added the Dev - WIP label Mar 31, 2015

@xzyfer xzyfer modified the milestones: 3.2.2, 3.3 May 1, 2015

@mgreter mgreter modified the milestones: 3.4, 3.3 Jun 13, 2015

@mgreter

This comment has been minimized.

Contributor

mgreter commented Jul 13, 2015

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

@mgreter mgreter modified the milestones: 3.3.1, 3.4, 3.3 Jul 16, 2015

@mgreter mgreter self-assigned this Jul 16, 2015

mgreter added a commit to mgreter/libsass that referenced this issue Jul 16, 2015

mgreter added a commit to mgreter/libsass that referenced this issue Jul 16, 2015

@xzyfer

This comment has been minimized.

Contributor

xzyfer commented Jul 17, 2015

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

@xzyfer xzyfer closed this Jul 17, 2015

@mgol

This comment has been minimized.

mgol commented Jul 17, 2015

/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

This comment has been minimized.

Contributor

xzyfer commented Jul 17, 2015

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" notifications@github.com 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).

@mgreter mgreter removed the bounty label Oct 22, 2016

@hcatlin hcatlin added the bounty label Oct 31, 2016

@hcatlin hcatlin changed the title from Support for Shadow DOM styling [$5] to Support for Shadow DOM styling [$5 awarded] Nov 5, 2016

@hcatlin hcatlin changed the title from Support for Shadow DOM styling [$5 awarded] to Support for Shadow DOM styling Jan 30, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment