{"action":"created","issue":{"url":"https://api.github.com/repos/dart-lang/polymer-dart/issues/143","labels_url":"https://api.github.com/repos/dart-lang/polymer-dart/issues/143/labels{/name}","comments_url":"https://api.github.com/repos/dart-lang/polymer-dart/issues/143/comments","events_url":"https://api.github.com/repos/dart-lang/polymer-dart/issues/143/events","html_url":"https://github.com/dart-lang/polymer-dart/issues/143","id":85652762,"number":143,"title":"Polymer components' CSS encapsulation is broken when run e.g. in Chrome when compiled by dart2js","user":{"login":"DartBot","id":8958862,"avatar_url":"https://avatars.githubusercontent.com/u/8958862?v=3","gravatar_id":"","url":"https://api.github.com/users/DartBot","html_url":"https://github.com/DartBot","followers_url":"https://api.github.com/users/DartBot/followers","following_url":"https://api.github.com/users/DartBot/following{/other_user}","gists_url":"https://api.github.com/users/DartBot/gists{/gist_id}","starred_url":"https://api.github.com/users/DartBot/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DartBot/subscriptions","organizations_url":"https://api.github.com/users/DartBot/orgs","repos_url":"https://api.github.com/users/DartBot/repos","events_url":"https://api.github.com/users/DartBot/events{/privacy}","received_events_url":"https://api.github.com/users/DartBot/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/dart-lang/polymer-dart/labels/bug","name":"bug","color":"fc2929"},{"url":"https://api.github.com/repos/dart-lang/polymer-dart/labels/PolymerMilestone-Next","name":"PolymerMilestone-Next","color":"ededed"},{"url":"https://api.github.com/repos/dart-lang/polymer-dart/labels/Priority-Medium","name":"Priority-Medium","color":"ededed"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-06-05T23:04:08Z","updated_at":"2015-06-05T23:04:09Z","closed_at":null,"body":"_Originally opened as dart-lang/sdk#17676_\n\n*This issue was originally filed by ant...&#064;mixbook.com*\n_____\n**What steps will reproduce the problem?**\n1. Create 2 polymer components, one nested into another, like:\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;polymer-element name=&quot;x-parent&quot;&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;template&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.title { color: blue; }\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;title&quot;&gt;Parent title&lt;/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;x-child&gt;&lt;/x-child&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/template&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type=&quot;application/dart&quot; src=&quot;parent.dart&quot;&gt;&lt;/script&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;/polymer-element&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;polymer-element name=&quot;x-child&quot;&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;template&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.title { background: yellow; }\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;title&quot;&gt;Child title&lt;/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/template&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type=&quot;application/dart&quot; src=&quot;child.dart&quot;&gt;&lt;/script&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;/polymer-element&gt;\n\n2. Compile it to JS by 'pub build', run in Chrome\n\n**What is the expected output? What do you see instead?**\n\nExpected output - &quot;Child title&quot; should be a black text on yellow background\nSee instead - &quot;Child title&quot; is blue text on yellow background\n\n**What version of the product are you using? On what operating system?**\nPolymer 0.9.5, Dart 1.2.0 Stable, Mac OS X 10.9\n\n**Please provide any additional information below.**\n\nIt works fine in Dartium, because it has the native Shadow DOM support.\nBut since it is not yet in Chrome, it creates two CSS rules, like:\n\n&nbsp;&nbsp;&nbsp;&nbsp;x-parent .title { color: blue }\n&nbsp;&nbsp;&nbsp;&nbsp;x-child .title { background: yellow }\n\nand of course x-parent .title also applies to x-child's title, since x-child is inside x-parent.\n\nBut that actually breaks the main idea and the main feature of the polymer elements - their styles are not encapsulated.\n"},"comment":{"url":"https://api.github.com/repos/dart-lang/polymer-dart/issues/comments/109473791","html_url":"https://github.com/dart-lang/polymer-dart/issues/143#issuecomment-109473791","issue_url":"https://api.github.com/repos/dart-lang/polymer-dart/issues/143","id":109473791,"user":{"login":"DartBot","id":8958862,"avatar_url":"https://avatars.githubusercontent.com/u/8958862?v=3","gravatar_id":"","url":"https://api.github.com/users/DartBot","html_url":"https://github.com/DartBot","followers_url":"https://api.github.com/users/DartBot/followers","following_url":"https://api.github.com/users/DartBot/following{/other_user}","gists_url":"https://api.github.com/users/DartBot/gists{/gist_id}","starred_url":"https://api.github.com/users/DartBot/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DartBot/subscriptions","organizations_url":"https://api.github.com/users/DartBot/orgs","repos_url":"https://api.github.com/users/DartBot/repos","events_url":"https://api.github.com/users/DartBot/events{/privacy}","received_events_url":"https://api.github.com/users/DartBot/received_events","type":"User","site_admin":false},"created_at":"2015-06-05T23:04:08Z","updated_at":"2015-06-05T23:04:08Z","body":"<a href=\"https://github.com/floitschG\"><img src=\"https://avatars.githubusercontent.com/u/8631949?v=3\" align=\"left\" width=\"48\" height=\"48\"hspace=\"10\"></img></a> **Comment by [floitschG](https://github.com/floitschG)**\n\n----\n\n*Added [Area-Polymer](../labels/Area-Polymer), [Triaged](../labels/Triaged) labels.*\n"}}