{"action":"created","issue":{"url":"https://api.github.com/repos/ebryn/ember-component-css/issues/10","labels_url":"https://api.github.com/repos/ebryn/ember-component-css/issues/10/labels{/name}","comments_url":"https://api.github.com/repos/ebryn/ember-component-css/issues/10/comments","events_url":"https://api.github.com/repos/ebryn/ember-component-css/issues/10/events","html_url":"https://github.com/ebryn/ember-component-css/issues/10","id":63578423,"number":10,"title":"Replace & selector with :host","user":{"login":"srsgores","id":1750837,"avatar_url":"https://avatars.githubusercontent.com/u/1750837?v=3","gravatar_id":"","url":"https://api.github.com/users/srsgores","html_url":"https://github.com/srsgores","followers_url":"https://api.github.com/users/srsgores/followers","following_url":"https://api.github.com/users/srsgores/following{/other_user}","gists_url":"https://api.github.com/users/srsgores/gists{/gist_id}","starred_url":"https://api.github.com/users/srsgores/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/srsgores/subscriptions","organizations_url":"https://api.github.com/users/srsgores/orgs","repos_url":"https://api.github.com/users/srsgores/repos","events_url":"https://api.github.com/users/srsgores/events{/privacy}","received_events_url":"https://api.github.com/users/srsgores/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-03-22T21:27:26Z","updated_at":"2015-03-22T21:55:59Z","closed_at":null,"body":"Currently, this plugin uses a custom character, ``&``, to represent styles for the containing component.  However, this is not according to the spec, and I suggest that this be replaced with the new web component shadow DOM selector, ``::host``, [as mentioned here](http://robdodson.me/shadow-dom-css-cheat-sheet/).\r\n\r\nAnother problem present with the current approach is that preprocessors understand the ``&`` character differently than browsers parsing normal CSS.  For example, take the following SASS code:\r\n\r\n```\r\n& {\r\n    color: #fff;\r\n}\r\n```\r\n\r\nIn this case, the ``&`` character resolves to the current context (which is ``null``), and therefore produces nothing.  Currently, to circumvent this, the user must *escape* the selector:\r\n\r\n```\r\n#{\"&\"} {\r\n    color: #fff;\r\n}\r\n```\r\n\r\nBut by replacing this with ``::host``, we regain compatibility with all preprocessors, and we are aligned with the spec:\r\n\r\n```\r\n::host {\r\n    color: #fff;\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/ebryn/ember-component-css/issues/comments/84711917","html_url":"https://github.com/ebryn/ember-component-css/issues/10#issuecomment-84711917","issue_url":"https://api.github.com/repos/ebryn/ember-component-css/issues/10","id":84711917,"user":{"login":"ebryn","id":3018,"avatar_url":"https://avatars.githubusercontent.com/u/3018?v=3","gravatar_id":"","url":"https://api.github.com/users/ebryn","html_url":"https://github.com/ebryn","followers_url":"https://api.github.com/users/ebryn/followers","following_url":"https://api.github.com/users/ebryn/following{/other_user}","gists_url":"https://api.github.com/users/ebryn/gists{/gist_id}","starred_url":"https://api.github.com/users/ebryn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ebryn/subscriptions","organizations_url":"https://api.github.com/users/ebryn/orgs","repos_url":"https://api.github.com/users/ebryn/repos","events_url":"https://api.github.com/users/ebryn/events{/privacy}","received_events_url":"https://api.github.com/users/ebryn/received_events","type":"User","site_admin":false},"created_at":"2015-03-22T21:55:59Z","updated_at":"2015-03-22T21:55:59Z","body":"This is a duplicate of #2 & #3. I'm interested in discussing this further, but as I said before: \r\n\r\n> I'm a bit hesitant to use officially proposed syntax because that raises people's expectations of the behavior and I don't want to expend a lot of effort on an emulation layer. I'd rather just passthrough this kind of stuff to Sass/Less so they can support the syntaxes.\r\n\r\n@jayphelps didn't end up responding, but I'm interested in exploring this suggestion with you, as long as we can alleviate my concerns :)"}}