{"action":"closed","issue":{"url":"https://api.github.com/repos/Polymer/polymer/issues/1555","labels_url":"https://api.github.com/repos/Polymer/polymer/issues/1555/labels{/name}","comments_url":"https://api.github.com/repos/Polymer/polymer/issues/1555/comments","events_url":"https://api.github.com/repos/Polymer/polymer/issues/1555/events","html_url":"https://github.com/Polymer/polymer/issues/1555","id":77364896,"number":1555,"title":"Custom properties defined on `:host` shouldn't override document styles.","user":{"login":"philipwalton","id":326742,"avatar_url":"https://avatars.githubusercontent.com/u/326742?v=3","gravatar_id":"","url":"https://api.github.com/users/philipwalton","html_url":"https://github.com/philipwalton","followers_url":"https://api.github.com/users/philipwalton/followers","following_url":"https://api.github.com/users/philipwalton/following{/other_user}","gists_url":"https://api.github.com/users/philipwalton/gists{/gist_id}","starred_url":"https://api.github.com/users/philipwalton/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/philipwalton/subscriptions","organizations_url":"https://api.github.com/users/philipwalton/orgs","repos_url":"https://api.github.com/users/philipwalton/repos","events_url":"https://api.github.com/users/philipwalton/events{/privacy}","received_events_url":"https://api.github.com/users/philipwalton/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/Polymer/polymer/labels/needs%20investigation","name":"needs investigation","color":"fef2c0"},{"url":"https://api.github.com/repos/Polymer/polymer/labels/p2","name":"p2","color":"fbca04"}],"state":"closed","locked":false,"assignee":{"login":"sorvell","id":78891,"avatar_url":"https://avatars.githubusercontent.com/u/78891?v=3","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},"milestone":null,"comments":0,"created_at":"2015-05-17T18:23:17Z","updated_at":"2015-05-25T00:31:04Z","closed_at":"2015-05-25T00:31:04Z","body":"According to the spec, rules from outside a shadow tree always win against rules within a shadow tree, when they attempt to style the same element:\r\nhttp://dev.w3.org/csswg/css-scoping/#cascading\r\n\r\nIt seems that Shady DOM correctly handles this with regular properties, but not with custom properties. Consider the following example:\r\n\r\n```html\r\n<dom-module id=\"my-element\">\r\n  <style>\r\n    :host {\r\n      --color: red;\r\n      color: var(--color);\r\n      background: yellow;\r\n    }\r\n  </style>\r\n  <template>\r\n    content...\r\n  </template>\r\n</dom-module>\r\n```\r\n\r\nWith the following external styles defined:\r\n\r\n```html\r\n<style is=\"custom-style\">\r\n  my-element {\r\n    --color: blue;\r\n    background: pink;\r\n  }\r\n</style>\r\n```\r\n\r\nThe result should be blue text with a pink background since document style should win here; instead, I see red text with a pink background.\r\n\r\nThat means Polymer is correctly determining that the outside `background:pink` property should win, but incorrectly not doing the same with the outside `--color:blue` custom property.\r\n"}}