{"action":"opened","issue":{"url":"https://api.github.com/repos/marcj/css-element-queries/issues/190","repository_url":"https://api.github.com/repos/marcj/css-element-queries","labels_url":"https://api.github.com/repos/marcj/css-element-queries/issues/190/labels{/name}","comments_url":"https://api.github.com/repos/marcj/css-element-queries/issues/190/comments","events_url":"https://api.github.com/repos/marcj/css-element-queries/issues/190/events","html_url":"https://github.com/marcj/css-element-queries/issues/190","id":260644652,"number":190,"title":"empty list loaded for document.styleSheets in a Polymer web component","user":{"login":"AntsLabor","id":28846589,"avatar_url":"https://avatars2.githubusercontent.com/u/28846589?v=4","gravatar_id":"","url":"https://api.github.com/users/AntsLabor","html_url":"https://github.com/AntsLabor","followers_url":"https://api.github.com/users/AntsLabor/followers","following_url":"https://api.github.com/users/AntsLabor/following{/other_user}","gists_url":"https://api.github.com/users/AntsLabor/gists{/gist_id}","starred_url":"https://api.github.com/users/AntsLabor/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AntsLabor/subscriptions","organizations_url":"https://api.github.com/users/AntsLabor/orgs","repos_url":"https://api.github.com/users/AntsLabor/repos","events_url":"https://api.github.com/users/AntsLabor/events{/privacy}","received_events_url":"https://api.github.com/users/AntsLabor/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-09-26T14:26:57Z","updated_at":"2017-09-26T14:26:57Z","closed_at":null,"author_association":"NONE","body":"Hello there,\r\n\r\ncss-element-queries was tested in a Polymer web component for the responsive text, where document.styleSheets doesn't seem to be supported in a Polymer element.\r\nhttps://github.com/marcj/css-element-queries/blob/adefff41c47aea79e73cd485ccd7d64ff9bbfc53/src/ElementQueries.js#L390\r\n\r\nHere is my code:\r\n`<link rel=\"import\" href=\"../../bower_components/polymer/polymer.html\">\r\n<link rel=\"import\" href=\"../../bower_components/polymer/polymer-element.html\">\r\n<script src=\"../../bower_components/css-element-queries/src/ResizeSensor.js\"></script>\r\n<script src=\"../../bower_components/css-element-queries/src/ElementQueries.js\"></script>\r\n\r\n<dom-module id=\"css-query\">\r\n\r\n  <template>\r\n    <style>\r\n      :host {\r\n        display: block;\r\n      }\r\n\r\n      :host::shadow .widget-name h2 {\r\n          font-size: 12px;\r\n      }\r\n       \r\n      :host::shadow .widget-name[min-width~=\"400px\"] h2 {\r\n          font-size: 18px;\r\n      }\r\n       \r\n      :host::shadow .widget-name[min-width~=\"600px\"] h2 {\r\n          padding: 55px;\r\n          text-align: center;\r\n          font-size: 24px;\r\n      }\r\n       \r\n      :host::shadow .widget-name[min-width~=\"700px\"] h2 {\r\n          font-size: 34px;\r\n          color: red;\r\n      }\r\n\r\n      :host::shadow img{\r\n        background-color: gray;\r\n      }\r\n    </style>\r\n    <h2>Hello [[prop1]]!</h2>\r\n\r\n    <div id=\"responsiveContent\">\r\n      <div class=\"widget-name\">\r\n          <h2>Element responsiveness FTW!</h2>\r\n      </div>\r\n    </div>\r\n  </template>\r\n\r\n  <script>\r\n    var responsiveContent;\r\n    /**\r\n     * @customElement\r\n     * @polymer\r\n     */\r\n    class CssQuery extends Polymer.Element {\r\n      static get is() { return 'css-query'; }\r\n      static get properties() {\r\n        return {\r\n          prop1: {\r\n            type: String,\r\n            value: 'css-query'\r\n          }\r\n        };\r\n      }\r\n    }\r\n\r\n    window.customElements.define(CssQuery.is, CssQuery);\r\n  </script>\r\n\r\n</dom-module>\r\n`\r\n\r\n\r\n"}}
{"actor":{"display_login":"AntsLabor"}}