Применение свойства Polymer в элементах стилей Shadow Root - PullRequest
Новая
       24

Применение свойства Polymer в элементах стилей Shadow Root

0 голосов
/ 17 сентября 2018

Таким образом, динамическая установка стилей достаточно проста, у меня вопрос, связанный с динамическими стилями в Media Query, поэтому между max-width: 1000px я хочу, чтобы стилизация была чем-то, основанным на свойстве или некотором вычисленном JS, таком как общее ширина карусели по количеству комплектующих.

В любом случае, здесь приведен фрагмент кода чего-то, что не работает, но показывает, как моё мышление о том, как я НАДЕЖДАЛ, что свойства могут быть применены: -P 

    <link rel="import" href="../../bower_components/polymer/polymer-element.html">

    <dom-module id="hello-eggs">
      <template>
        <style>
          :host {
            display: block;
            background: [[prop2]];
          }

          @media screen and (max-width: 1000px) {
            background: [[prop2]]
          }
        </style>
        <span>[[prop1]] are here</span>
      </template>

      <script>
        /**
        * @customElement
        * @polymer
        */
        class HelloEggs extends Polymer.Element {
          static get is() { return 'hello-eggs'; }
          static get properties() {
            return {
              prop1: {
                type: String,
                value: 'Hello Eggs'
              },
              prop2: {
                type: String,
                value: '#fc0'
              }
            };
          }
        }

        window.customElements.define(HelloEggs.is, HelloEggs);
      </script>
    </dom-module>

Заранее спасибо

1 Ответ

0 голосов
/ 17 сентября 2018

Ничего страшного, я нашел способ, который делает меня счастливым и, надеюсь, помогает другим людям, таким как я: -D

По сути, я получаю таблицу стилей и вставляю правило для нового медиазапроса, которое позволяет мне устанавливать то, что я хочу. Я также изменил ширину на 500px 

    <link rel="import" href="../../bower_components/polymer/polymer-element.html">

    <dom-module id="hello-eggs">
      <template>
        <style>
          :host {
            display: block;
            background: #eee;
            margin-bottom: 10px;
          }
        </style>
        <span>[[prop1]] are here</span>
      </template>

      <script>
        /**
        * @customElement
        * @polymer
        */
        class HelloEggs extends Polymer.Element {
          static get is() { return 'hello-eggs'; }
          static get properties() {
            return {
              prop1: {
                type: String,
                value: 'Hello Eggs'
              },
              prop2: {
                type: String,
                value: '#fc0'
              }
            };
          }

          connectedCallback() {
            super.connectedCallback();

            let sheet = this.shadowRoot.styleSheets[0];
            sheet.insertRule(`@media screen and (max-width: 500px) { span { background: ${this.prop2}; } }`, 1);
          }
        }

        window.customElements.define(HelloEggs.is, HelloEggs);
      </script>
    </dom-module>

Я все еще думаю, что было бы здорово иметь возможность помещать свойства в область стилей для экстремальных случаев, но это все равно дает мне это, если у меня есть все стили, примененные с помощью insertRule, который отлично подходит для ширины и высоты и т. Д.

...