marcj / css-element-queries

CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.
http://marcj.github.io/css-element-queries/
MIT License
4.27k stars 487 forks source link

empty list loaded for document.styleSheets in a Polymer web component #190

Open AntsLabor opened 7 years ago

AntsLabor commented 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>
marcj commented 7 years ago

What is the error and question?

AntsLabor commented 7 years ago

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?