{"action":"created","issue":{"url":"https://api.github.com/repos/saeidzebardast/nvd3-elements/issues/12","repository_url":"https://api.github.com/repos/saeidzebardast/nvd3-elements","labels_url":"https://api.github.com/repos/saeidzebardast/nvd3-elements/issues/12/labels{/name}","comments_url":"https://api.github.com/repos/saeidzebardast/nvd3-elements/issues/12/comments","events_url":"https://api.github.com/repos/saeidzebardast/nvd3-elements/issues/12/events","html_url":"https://github.com/saeidzebardast/nvd3-elements/issues/12","id":188012306,"number":12,"title":"Styles issues since Polymer 1.7 ","user":{"login":"plequang","id":5500311,"avatar_url":"https://avatars.githubusercontent.com/u/5500311?v=3","gravatar_id":"","url":"https://api.github.com/users/plequang","html_url":"https://github.com/plequang","followers_url":"https://api.github.com/users/plequang/followers","following_url":"https://api.github.com/users/plequang/following{/other_user}","gists_url":"https://api.github.com/users/plequang/gists{/gist_id}","starred_url":"https://api.github.com/users/plequang/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/plequang/subscriptions","organizations_url":"https://api.github.com/users/plequang/orgs","repos_url":"https://api.github.com/users/plequang/repos","events_url":"https://api.github.com/users/plequang/events{/privacy}","received_events_url":"https://api.github.com/users/plequang/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-11-08T14:54:17Z","updated_at":"2016-11-12T02:23:15Z","closed_at":null,"body":"Hi,\r\n\r\nSince Polymer 1.7, some of the styles defined in nvd3-shared-styles do \r\nnot apply anymore.\r\n\r\nTo reproduce, run bower update in the nvd3-elements repo, \r\nthen `polyserve` and go to \r\nhttp://localhost:8080/components/nvd3-elements/demo/nvd3-line.html\r\n\r\nThe rule that do not apply and that makes the demo look weird is :\r\n\r\n```css\r\nLine 289\r\n      :root svg.nvd3-svg {\r\n        ...\r\n        width: 100%;\r\n        height: 100%;\r\n      }\r\n```\r\n\r\nI think this rule do not apply because nvd3-shared-styles is used in a \r\ndocument level `custom-style` in nvd3-behavior.html :\r\n\r\n```\r\n<style is=\"custom-style\" include=\"nvd3-shared-styles\"></style>\r\n```\r\n\r\nFrom the doc https://www.polymer-project.org/1.0/docs/devguide/styling#custom-style :\r\n> Document styles defined in a custom-style are shimmed to ensure \r\nthey do not leak into local DOM when running on browsers without \r\nnative Shadow DOM.\r\n\r\nThe `svg` element is in the local DOM, so it seems normal that the rule \r\ndoes not apply (even though it was working before 1.7).\r\n\r\nOther css rules seem to work, because they apply on elements added \r\nto the DOM by nvd3, so not under the control of Polymer shady DOM polyfill\r\n(none of these elements have the `style-scope` class), but this is not something\r\nwe should rely on.\r\n\r\nAlso, using document level styles rules is probably the cause of issue #11, \r\nbecause styles really do not leak into the local DOM from above under shadow DOM.  \r\n\r\nI think using scoped styles is the path to solve this issue.\r\n\r\nI wrote a PR to achieve this and everything seems to work with shady \r\nand shadow DOM. Basically, I've included nvd3-shared-styles in every element\r\nlocal DOM style, and rewritten the CSS rules to target the local DOM.\r\n\r\nOne problem though is the styling of the tooltip. \r\nnvd3 adds the tooltip div at the end of the body, so it still need document \r\nlevel styling.\r\n\r\nI've tried to make clear my findings, but I'm still confused with \r\nall these DOM (shadow/shady/local/light) things. So don't hesitate to correct me\r\nif I wrote something wrong. "},"comment":{"url":"https://api.github.com/repos/saeidzebardast/nvd3-elements/issues/comments/260095682","html_url":"https://github.com/saeidzebardast/nvd3-elements/issues/12#issuecomment-260095682","issue_url":"https://api.github.com/repos/saeidzebardast/nvd3-elements/issues/12","id":260095682,"user":{"login":"saeidzebardast","id":896271,"avatar_url":"https://avatars.githubusercontent.com/u/896271?v=3","gravatar_id":"","url":"https://api.github.com/users/saeidzebardast","html_url":"https://github.com/saeidzebardast","followers_url":"https://api.github.com/users/saeidzebardast/followers","following_url":"https://api.github.com/users/saeidzebardast/following{/other_user}","gists_url":"https://api.github.com/users/saeidzebardast/gists{/gist_id}","starred_url":"https://api.github.com/users/saeidzebardast/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/saeidzebardast/subscriptions","organizations_url":"https://api.github.com/users/saeidzebardast/orgs","repos_url":"https://api.github.com/users/saeidzebardast/repos","events_url":"https://api.github.com/users/saeidzebardast/events{/privacy}","received_events_url":"https://api.github.com/users/saeidzebardast/received_events","type":"User","site_admin":false},"created_at":"2016-11-12T02:23:15Z","updated_at":"2016-11-12T02:23:15Z","body":"I've tested the PR. It works fine. Thanks for the effort."}}
{"actor":{"display_login":"saeidzebardast"}}