{"action":"created","comment":{"url":"https://api.github.com/repos/Polymer/docs/pulls/comments/53094391","id":53094391,"diff_hunk":"@@ -24,92 +40,148 @@ provided via `<style>` tags placed inside the element's local DOM `<template>`.\n             display: block;\n             border: 1px solid red;\n           }\n-          #child-element {\n+          /* In shady DOM this will become `.child-element.my-element {` */\n+          .child-element {\n             background: yellow;\n           }\n-          /* styling elements distributed to content (via ::content) requires */\n-          /* selecting the parent of the <content> element for compatibility with */\n-          /* shady DOM . This can be :host or a wrapper element. */\n-          .content-wrapper ::content > .special {\n-            background: orange;\n-          }\n+\n         </style>\n \n-        <div id=\"child-element\">In local DOM!</div>\n-        <div class=\"content-wrapper\"><content></content></div>\n+        <div class=\"child-element\">In local DOM!</div>\n+        <content></content>\n \n       </template>\n \n       <script>\n-\n           Polymer({\n               is: 'my-element'\n           });\n-\n       </script>\n \n     </dom-module>\n \n-To place styles outside of the element, or share styles between elements, you can create\n-a [style module](#style-modules).\n+In the page, you might have:\n+\n+    <my-element>\n+        <!-- In shady DOM the class is \"child-element style-scope my-element\" -->\n+        <div class=\"child-element\">In light DOM!</div>\n+    </my-element>\n+\n+And see that only `In local DOM` has a yellow background.\n \n **Note:**  Prior to Polymer 1.1, the recommendation was to place `<style>` tags\n inside the `<dom-module>` for an element (but _outside_ the `<template>`). This\n  is still supported, but is no longer recommended.\n {: .alert .alert-info }\n \n+**NOTE: I like introducing what shadow DOM styling SHOULD be like, and then explain what we should do with shady DOM, and why.**\n+\n+#### Shim limitations\n+\n+There is no need to do any special workaround in this simple case, since shady\n+DOM will automatically change the style as well as the element's class to make\n+sure that styling in the local DOM doesn't leak out of `my-element` by adding a\n+required class, `my-element`, to the created element (and to the selector).\n+\n+\n+### Styling distributed children (`::content`)\n+\n+In shadow DOM, you can style an element's light DOM using the `::content` pseudo element. So, you can do this:\n+\n+    <dom-module id=\"my-element\">\n+\n+      <template>\n+\n+        <style>\n+          /* WARNING: This does NOT work in shady DOM */\n+          ::content > .special {\n+            background: orange;\n+          }\n+        </style>\n \n-### Styling distributed children (::content)\n+       <div class=\"special\">This should not be affected</div>\n+       <content></content>\n+      </template>\n \n-Under shady DOM, the `<content>` tag doesn't appear in the DOM tree. Styles are rewritten to remove the\n-`::content` pseudo-element, **and any combinator immediately to the left of `::content`.**\n+      <script>\n+          Polymer({\n+              is: 'my-element'\n+          });\n+      </script>\n \n-This implies:\n+    </dom-module>\n \n-*   You must have a selector to the left of the `::content` pseudo-element.\n \n-        :host ::content div\n+In shadow DOM, the `.special` class will only ever affect elements in the light\n+DOM. So when you use your element:\n \n-    Becomes:\n+    <my-element>\n+        <div class=\"special\">This should be special!</div>\n+    </my-element>\n \n-        x-foo div\n+Only `This should be special!` will have an orange background.\n \n-    (Where `x-foo` is the name of the custom element.)\n+#### Shim limitations\n \n-*   To limit styles to elements inside the ::content tag, add a wrapper element around the\n-    `<content>` element. This is especially important when using a child combinator (`>`) to\n-    select top-level children.\n+Shady DOM is much more limited than shadow DOM.\n \n-        <dom-module id=\"my-element\">\n+Under shady DOM,  the `<content>` tag doesn't appear in the DOM tree, and styles\n+are rewritten to remove the `::content` pseudo-element **as well as and any\n+combinator immediately to the left of `::content`.** (E.g. `> :: content` where `>`","path":"1.0/docs/devguide/styling.md","position":148,"original_position":148,"commit_id":"12e30d00d4ed2edba39ac7d1b5c046b21828d5e4","original_commit_id":"12e30d00d4ed2edba39ac7d1b5c046b21828d5e4","user":{"login":"arthurevans","id":1149422,"avatar_url":"https://avatars.githubusercontent.com/u/1149422?v=3","gravatar_id":"","url":"https://api.github.com/users/arthurevans","html_url":"https://github.com/arthurevans","followers_url":"https://api.github.com/users/arthurevans/followers","following_url":"https://api.github.com/users/arthurevans/following{/other_user}","gists_url":"https://api.github.com/users/arthurevans/gists{/gist_id}","starred_url":"https://api.github.com/users/arthurevans/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/arthurevans/subscriptions","organizations_url":"https://api.github.com/users/arthurevans/orgs","repos_url":"https://api.github.com/users/arthurevans/repos","events_url":"https://api.github.com/users/arthurevans/events{/privacy}","received_events_url":"https://api.github.com/users/arthurevans/received_events","type":"User","site_admin":false},"body":"E.g. => for example (we avoid Latin).","created_at":"2016-02-16T22:58:11Z","updated_at":"2016-02-16T22:58:11Z","html_url":"https://github.com/Polymer/docs/pull/1537#discussion_r53094391","pull_request_url":"https://api.github.com/repos/Polymer/docs/pulls/1537","_links":{"self":{"href":"https://api.github.com/repos/Polymer/docs/pulls/comments/53094391"},"html":{"href":"https://github.com/Polymer/docs/pull/1537#discussion_r53094391"},"pull_request":{"href":"https://api.github.com/repos/Polymer/docs/pulls/1537"}}},"pull_request":{"url":"https://api.github.com/repos/Polymer/docs/pulls/1537","id":59319060,"html_url":"https://github.com/Polymer/docs/pull/1537","diff_url":"https://github.com/Polymer/docs/pull/1537.diff","patch_url":"https://github.com/Polymer/docs/pull/1537.patch","issue_url":"https://api.github.com/repos/Polymer/docs/issues/1537","number":1537,"state":"open","locked":false,"title":"Styling guide worked on extensively -- first draft","user":{"login":"mercmobily","id":2128734,"avatar_url":"https://avatars.githubusercontent.com/u/2128734?v=3","gravatar_id":"","url":"https://api.github.com/users/mercmobily","html_url":"https://github.com/mercmobily","followers_url":"https://api.github.com/users/mercmobily/followers","following_url":"https://api.github.com/users/mercmobily/following{/other_user}","gists_url":"https://api.github.com/users/mercmobily/gists{/gist_id}","starred_url":"https://api.github.com/users/mercmobily/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mercmobily/subscriptions","organizations_url":"https://api.github.com/users/mercmobily/orgs","repos_url":"https://api.github.com/users/mercmobily/repos","events_url":"https://api.github.com/users/mercmobily/events{/privacy}","received_events_url":"https://api.github.com/users/mercmobily/received_events","type":"User","site_admin":false},"body":"Following up from #1533 , I decided that asking questions and asking you guys to \"rewrite a section\" was less than ideal .So,I sat down over the week end (well, actually, into Monday morning) and worked on an extensive rewrite.\r\n\r\nAfter wasting some of your time, hopefully you will find here something valuable to use or take apart.\r\n\r\nIn general:\r\n\r\n * I made the examples more uniform and more comprehensive, always using `<my-element>` and `<my-toolbar>`\r\n\r\n* I restructured it a little, so that there is always a \"normal\" explanation and then a section on the shim's limitations.\r\n\r\n* Whenever possible, I tried my best to explain things (like the dynamism and inheritance limitations) using code that matched what the reader had read previously in the chapter\r\n\r\n* I explained inheritance limitations providing -- again -- an example similar to the previous ones, but adding a <span> to the mix AND (not sure here if it made sense) trying to explain, \"give or take\", what happens behind the scenes and emphasising that Polymer elements are treated differently.\r\n\r\nAs usual: no hard feelings if you scrap it all. It was a good exercise for me anyway.","created_at":"2016-02-15T04:02:32Z","updated_at":"2016-02-16T22:58:11Z","closed_at":null,"merged_at":null,"merge_commit_sha":"bfd5d36fe736532b3145c29b65d2a646b2c67344","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/Polymer/docs/pulls/1537/commits","review_comments_url":"https://api.github.com/repos/Polymer/docs/pulls/1537/comments","review_comment_url":"https://api.github.com/repos/Polymer/docs/pulls/comments{/number}","comments_url":"https://api.github.com/repos/Polymer/docs/issues/1537/comments","statuses_url":"https://api.github.com/repos/Polymer/docs/statuses/12e30d00d4ed2edba39ac7d1b5c046b21828d5e4","head":{"label":"mercmobily:betterstyling","ref":"betterstyling","sha":"12e30d00d4ed2edba39ac7d1b5c046b21828d5e4","user":{"login":"mercmobily","id":2128734,"avatar_url":"https://avatars.githubusercontent.com/u/2128734?v=3","gravatar_id":"","url":"https://api.github.com/users/mercmobily","html_url":"https://github.com/mercmobily","followers_url":"https://api.github.com/users/mercmobily/followers","following_url":"https://api.github.com/users/mercmobily/following{/other_user}","gists_url":"https://api.github.com/users/mercmobily/gists{/gist_id}","starred_url":"https://api.github.com/users/mercmobily/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mercmobily/subscriptions","organizations_url":"https://api.github.com/users/mercmobily/orgs","repos_url":"https://api.github.com/users/mercmobily/repos","events_url":"https://api.github.com/users/mercmobily/events{/privacy}","received_events_url":"https://api.github.com/users/mercmobily/received_events","type":"User","site_admin":false},"repo":{"id":46647884,"name":"docs","full_name":"mercmobily/docs","owner":{"login":"mercmobily","id":2128734,"avatar_url":"https://avatars.githubusercontent.com/u/2128734?v=3","gravatar_id":"","url":"https://api.github.com/users/mercmobily","html_url":"https://github.com/mercmobily","followers_url":"https://api.github.com/users/mercmobily/followers","following_url":"https://api.github.com/users/mercmobily/following{/other_user}","gists_url":"https://api.github.com/users/mercmobily/gists{/gist_id}","starred_url":"https://api.github.com/users/mercmobily/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mercmobily/subscriptions","organizations_url":"https://api.github.com/users/mercmobily/orgs","repos_url":"https://api.github.com/users/mercmobily/repos","events_url":"https://api.github.com/users/mercmobily/events{/privacy}","received_events_url":"https://api.github.com/users/mercmobily/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/mercmobily/docs","description":"Documentation for Polymer","fork":true,"url":"https://api.github.com/repos/mercmobily/docs","forks_url":"https://api.github.com/repos/mercmobily/docs/forks","keys_url":"https://api.github.com/repos/mercmobily/docs/keys{/key_id}","collaborators_url":"https://api.github.com/repos/mercmobily/docs/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/mercmobily/docs/teams","hooks_url":"https://api.github.com/repos/mercmobily/docs/hooks","issue_events_url":"https://api.github.com/repos/mercmobily/docs/issues/events{/number}","events_url":"https://api.github.com/repos/mercmobily/docs/events","assignees_url":"https://api.github.com/repos/mercmobily/docs/assignees{/user}","branches_url":"https://api.github.com/repos/mercmobily/docs/branches{/branch}","tags_url":"https://api.github.com/repos/mercmobily/docs/tags","blobs_url":"https://api.github.com/repos/mercmobily/docs/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/mercmobily/docs/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/mercmobily/docs/git/refs{/sha}","trees_url":"https://api.github.com/repos/mercmobily/docs/git/trees{/sha}","statuses_url":"https://api.github.com/repos/mercmobily/docs/statuses/{sha}","languages_url":"https://api.github.com/repos/mercmobily/docs/languages","stargazers_url":"https://api.github.com/repos/mercmobily/docs/stargazers","contributors_url":"https://api.github.com/repos/mercmobily/docs/contributors","subscribers_url":"https://api.github.com/repos/mercmobily/docs/subscribers","subscription_url":"https://api.github.com/repos/mercmobily/docs/subscription","commits_url":"https://api.github.com/repos/mercmobily/docs/commits{/sha}","git_commits_url":"https://api.github.com/repos/mercmobily/docs/git/commits{/sha}","comments_url":"https://api.github.com/repos/mercmobily/docs/comments{/number}","issue_comment_url":"https://api.github.com/repos/mercmobily/docs/issues/comments{/number}","contents_url":"https://api.github.com/repos/mercmobily/docs/contents/{+path}","compare_url":"https://api.github.com/repos/mercmobily/docs/compare/{base}...{head}","merges_url":"https://api.github.com/repos/mercmobily/docs/merges","archive_url":"https://api.github.com/repos/mercmobily/docs/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/mercmobily/docs/downloads","issues_url":"https://api.github.com/repos/mercmobily/docs/issues{/number}","pulls_url":"https://api.github.com/repos/mercmobily/docs/pulls{/number}","milestones_url":"https://api.github.com/repos/mercmobily/docs/milestones{/number}","notifications_url":"https://api.github.com/repos/mercmobily/docs/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/mercmobily/docs/labels{/name}","releases_url":"https://api.github.com/repos/mercmobily/docs/releases{/id}","deployments_url":"https://api.github.com/repos/mercmobily/docs/deployments","created_at":"2015-11-22T05:31:10Z","updated_at":"2016-02-15T03:50:57Z","pushed_at":"2016-02-15T03:53:36Z","git_url":"git://github.com/mercmobily/docs.git","ssh_url":"git@github.com:mercmobily/docs.git","clone_url":"https://github.com/mercmobily/docs.git","svn_url":"https://github.com/mercmobily/docs","homepage":"https://www.polymer-project.org","size":81960,"stargazers_count":0,"watchers_count":0,"language":"HTML","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"Polymer:master","ref":"master","sha":"7405bfe3c15f6e11d2674ad897e5c49ed663c8fa","user":{"login":"Polymer","id":2159051,"avatar_url":"https://avatars.githubusercontent.com/u/2159051?v=3","gravatar_id":"","url":"https://api.github.com/users/Polymer","html_url":"https://github.com/Polymer","followers_url":"https://api.github.com/users/Polymer/followers","following_url":"https://api.github.com/users/Polymer/following{/other_user}","gists_url":"https://api.github.com/users/Polymer/gists{/gist_id}","starred_url":"https://api.github.com/users/Polymer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Polymer/subscriptions","organizations_url":"https://api.github.com/users/Polymer/orgs","repos_url":"https://api.github.com/users/Polymer/repos","events_url":"https://api.github.com/users/Polymer/events{/privacy}","received_events_url":"https://api.github.com/users/Polymer/received_events","type":"Organization","site_admin":false},"repo":{"id":7804910,"name":"docs","full_name":"Polymer/docs","owner":{"login":"Polymer","id":2159051,"avatar_url":"https://avatars.githubusercontent.com/u/2159051?v=3","gravatar_id":"","url":"https://api.github.com/users/Polymer","html_url":"https://github.com/Polymer","followers_url":"https://api.github.com/users/Polymer/followers","following_url":"https://api.github.com/users/Polymer/following{/other_user}","gists_url":"https://api.github.com/users/Polymer/gists{/gist_id}","starred_url":"https://api.github.com/users/Polymer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Polymer/subscriptions","organizations_url":"https://api.github.com/users/Polymer/orgs","repos_url":"https://api.github.com/users/Polymer/repos","events_url":"https://api.github.com/users/Polymer/events{/privacy}","received_events_url":"https://api.github.com/users/Polymer/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/Polymer/docs","description":"Documentation for Polymer","fork":false,"url":"https://api.github.com/repos/Polymer/docs","forks_url":"https://api.github.com/repos/Polymer/docs/forks","keys_url":"https://api.github.com/repos/Polymer/docs/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Polymer/docs/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Polymer/docs/teams","hooks_url":"https://api.github.com/repos/Polymer/docs/hooks","issue_events_url":"https://api.github.com/repos/Polymer/docs/issues/events{/number}","events_url":"https://api.github.com/repos/Polymer/docs/events","assignees_url":"https://api.github.com/repos/Polymer/docs/assignees{/user}","branches_url":"https://api.github.com/repos/Polymer/docs/branches{/branch}","tags_url":"https://api.github.com/repos/Polymer/docs/tags","blobs_url":"https://api.github.com/repos/Polymer/docs/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Polymer/docs/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Polymer/docs/git/refs{/sha}","trees_url":"https://api.github.com/repos/Polymer/docs/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Polymer/docs/statuses/{sha}","languages_url":"https://api.github.com/repos/Polymer/docs/languages","stargazers_url":"https://api.github.com/repos/Polymer/docs/stargazers","contributors_url":"https://api.github.com/repos/Polymer/docs/contributors","subscribers_url":"https://api.github.com/repos/Polymer/docs/subscribers","subscription_url":"https://api.github.com/repos/Polymer/docs/subscription","commits_url":"https://api.github.com/repos/Polymer/docs/commits{/sha}","git_commits_url":"https://api.github.com/repos/Polymer/docs/git/commits{/sha}","comments_url":"https://api.github.com/repos/Polymer/docs/comments{/number}","issue_comment_url":"https://api.github.com/repos/Polymer/docs/issues/comments{/number}","contents_url":"https://api.github.com/repos/Polymer/docs/contents/{+path}","compare_url":"https://api.github.com/repos/Polymer/docs/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Polymer/docs/merges","archive_url":"https://api.github.com/repos/Polymer/docs/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Polymer/docs/downloads","issues_url":"https://api.github.com/repos/Polymer/docs/issues{/number}","pulls_url":"https://api.github.com/repos/Polymer/docs/pulls{/number}","milestones_url":"https://api.github.com/repos/Polymer/docs/milestones{/number}","notifications_url":"https://api.github.com/repos/Polymer/docs/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Polymer/docs/labels{/name}","releases_url":"https://api.github.com/repos/Polymer/docs/releases{/id}","deployments_url":"https://api.github.com/repos/Polymer/docs/deployments","created_at":"2013-01-24T19:11:00Z","updated_at":"2016-02-16T18:19:16Z","pushed_at":"2016-02-16T22:28:19Z","git_url":"git://github.com/Polymer/docs.git","ssh_url":"git@github.com:Polymer/docs.git","clone_url":"https://github.com/Polymer/docs.git","svn_url":"https://github.com/Polymer/docs","homepage":"https://www.polymer-project.org","size":85708,"stargazers_count":916,"watchers_count":916,"language":"HTML","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":2454,"mirror_url":null,"open_issues_count":134,"forks":2454,"open_issues":134,"watchers":916,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/Polymer/docs/pulls/1537"},"html":{"href":"https://github.com/Polymer/docs/pull/1537"},"issue":{"href":"https://api.github.com/repos/Polymer/docs/issues/1537"},"comments":{"href":"https://api.github.com/repos/Polymer/docs/issues/1537/comments"},"review_comments":{"href":"https://api.github.com/repos/Polymer/docs/pulls/1537/comments"},"review_comment":{"href":"https://api.github.com/repos/Polymer/docs/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/Polymer/docs/pulls/1537/commits"},"statuses":{"href":"https://api.github.com/repos/Polymer/docs/statuses/12e30d00d4ed2edba39ac7d1b5c046b21828d5e4"}}}}