{"action":"created","issue":{"url":"https://api.github.com/repos/w3c/webcomponents/issues/468","repository_url":"https://api.github.com/repos/w3c/webcomponents","labels_url":"https://api.github.com/repos/w3c/webcomponents/issues/468/labels{/name}","comments_url":"https://api.github.com/repos/w3c/webcomponents/issues/468/comments","events_url":"https://api.github.com/repos/w3c/webcomponents/issues/468/events","html_url":"https://github.com/w3c/webcomponents/issues/468","id":144361168,"number":468,"title":"Provide a lightweight mechanism to add styles to a custom element","user":{"login":"sorvell","id":78891,"avatar_url":"https://avatars1.githubusercontent.com/u/78891?v=4","gravatar_id":"","url":"https://api.github.com/users/sorvell","html_url":"https://github.com/sorvell","followers_url":"https://api.github.com/users/sorvell/followers","following_url":"https://api.github.com/users/sorvell/following{/other_user}","gists_url":"https://api.github.com/users/sorvell/gists{/gist_id}","starred_url":"https://api.github.com/users/sorvell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sorvell/subscriptions","organizations_url":"https://api.github.com/users/sorvell/orgs","repos_url":"https://api.github.com/users/sorvell/repos","events_url":"https://api.github.com/users/sorvell/events{/privacy}","received_events_url":"https://api.github.com/users/sorvell/received_events","type":"User","site_admin":false},"labels":[{"id":228779701,"url":"https://api.github.com/repos/w3c/webcomponents/labels/custom-elements","name":"custom-elements","color":"5319e7","default":false},{"id":841509738,"url":"https://api.github.com/repos/w3c/webcomponents/labels/needs%20concrete%20proposal","name":"needs concrete proposal","color":"1cddc7","default":false},{"id":217336260,"url":"https://api.github.com/repos/w3c/webcomponents/labels/shadow-dom","name":"shadow-dom","color":"207de5","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":101,"created_at":"2016-03-29T19:17:40Z","updated_at":"2018-03-08T10:50:14Z","closed_at":null,"author_association":"NONE","body":"**Proposal**\n\nAllow a user to define a set of styles to apply to a custom element as an option to `customElements.define`. Conceptually, providing styles would make the element act as if it had a `shadowRoot` including a `style` element with the provided css. The rules used to target the element would be [the same as](https://www.w3.org/TR/css-scoping-1/) in Shadow DOM.\n\n```\ncustomElements.define(\"cool-element\", CoolElement, {styles: ':host {display: block; }');\n```\n\n**Discussion**\n\nTo style a custom element that does not otherwise need a `shadowRoot` incurs an unfortunate performance penalty and is cumbersome. A user must create a shadowRoot and put inside it a `style` element and a `slot` element. Providing this styling at define time gives the platform an opportunity to optimize beyond what could be achieved when interpreting user code that installs the shadowRoot, style, and slot at construct/connected time. In addition, because the proposed syntax is less code than the alternative, it would likely reduce concern over https://github.com/w3c/webcomponents/issues/426.\n\nIdeally, developers could include `styles` targeting elements inside Shadow DOM in addition to the element itself. Again, the provided `styles` would act as if they were in a `style` that was the first element inside the `shadowRoot`. This could help address https://github.com/w3c/webcomponents/issues/282 and the feature could be explained as a [constructable stylesheet](http://tabatkins.github.io/specs/construct-stylesheets/) when this feature is added to the platform.\n"},"comment":{"url":"https://api.github.com/repos/w3c/webcomponents/issues/comments/371452415","html_url":"https://github.com/w3c/webcomponents/issues/468#issuecomment-371452415","issue_url":"https://api.github.com/repos/w3c/webcomponents/issues/468","id":371452415,"user":{"login":"emilio","id":1323194,"avatar_url":"https://avatars1.githubusercontent.com/u/1323194?v=4","gravatar_id":"","url":"https://api.github.com/users/emilio","html_url":"https://github.com/emilio","followers_url":"https://api.github.com/users/emilio/followers","following_url":"https://api.github.com/users/emilio/following{/other_user}","gists_url":"https://api.github.com/users/emilio/gists{/gist_id}","starred_url":"https://api.github.com/users/emilio/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/emilio/subscriptions","organizations_url":"https://api.github.com/users/emilio/orgs","repos_url":"https://api.github.com/users/emilio/repos","events_url":"https://api.github.com/users/emilio/events{/privacy}","received_events_url":"https://api.github.com/users/emilio/received_events","type":"User","site_admin":false},"created_at":"2018-03-08T10:50:14Z","updated_at":"2018-03-08T10:50:14Z","author_association":"NONE","body":"> In case of \":host > span\", a selector matching should not traverse into the host's children in any case.\r\nInstead, it should traverse into shadow root's children for \":host > span\".\r\n\r\nI don't see anything like that in https://drafts.csswg.org/css-scoping/#host-selector. `:host > span` would never apply because those rules are never matched against the span. But the shadow root's children thing also doesn't make sense to me. Does Blink really look at the parent element crossing the shadow root for this?"}}
{"actor":{"display_login":"emilio"}}