css-element-queries
                                
                                
                                
                                    css-element-queries copied to clipboard
                            
                            
                            
                        empty list loaded for document.styleSheets in a Polymer web component
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?