Open AntsLabor opened 7 years ago
Hello there,
css-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. https://github.com/marcj/css-element-queries/blob/adefff41c47aea79e73cd485ccd7d64ff9bbfc53/src/ElementQueries.js#L390
Here is my code:
<link rel="import" href="../../bower_components/polymer/polymer.html"> <link rel="import" href="../../bower_components/polymer/polymer-element.html"> <script src="../../bower_components/css-element-queries/src/ResizeSensor.js"></script> <script src="../../bower_components/css-element-queries/src/ElementQueries.js"></script> <dom-module id="css-query"> <template> <style> :host { display: block; } .widget-name h2 { font-size: 12px; } .widget-name[min-width~="400px"] h2 { font-size: 18px; } .widget-name[min-width~="600px"] h2 { padding: 55px; text-align: center; font-size: 24px; } .widget-name[min-width~="700px"] h2 { font-size: 34px; color: red; } img{ background-color: gray; } </style> <h2>Hello [[prop1]]!</h2> <div id="responsiveContent"> <div class="widget-name"> <h2>Element responsiveness FTW!</h2> </div> </div> </template> <script> var responsiveContent; /** * @customElement * @polymer */ class CssQuery extends Polymer.Element { static get is() { return 'css-query'; } static get properties() { return { prop1: { type: String, value: 'css-query' } }; } } window.customElements.define(CssQuery.is, CssQuery); </script> </dom-module>
What is the error and question?
The question is how can we apply readRules on the stylesheet defined in a Polymer 2 element when document.styleSheets fail to capture css in the shadow DOM?
readRules
Hello there,
css-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. https://github.com/marcj/css-element-queries/blob/adefff41c47aea79e73cd485ccd7d64ff9bbfc53/src/ElementQueries.js#L390
Here is my code: