Полимер - Распределяются ли узлы в стиле, а затем распространяются?

Question

Полимер - Распределяются ли узлы в стиле, а затем распространяются?

1

Скажем, у меня есть два пользовательских элемента, определяемые как расширения Полимерного элемента:

с-EL1
с-EL2

шаблоны:

с-EL1

<dom-module id="c-el1">
    <template>
        <style>
            p{
               color:red;
             }
        </style>
        <c-el2>
            <p>custom text</p>
        </c-el2>
    </template>
</dom-module>

с-EL2

<dom-module id="c-el2">
    <template>
        <style>
            p::slotted(*){
               color:green;
             }
        </style>
       <p> <slot></slot></p>
    </template>
</dom-module>

Должна ли P с пользовательским текстом быть green? или red?

В настоящее время, в пользовательских элементов стилей с-EL1 P с пользовательским текстом, который прорезями в с-EL2

Schrodinger's cat 30 июль 2017, в 12:33

Источник

Теги:

javascript

css

polymer

custom-element

2 ответа

Ещё вопросы

Derrick B. · Answer 1 · 2017-07-30T13-09-00.000Z

<p> будет отображаться красным, потому что стили из c-el1 переопределяют стили из c-el2

Если вы не моделировали <p> в c-el1, правильным способом выбора элемента c-el2 в c-el2 было бы:

<dom-module id="custom-el2">
  <template>
    <style>
      :host ::slotted(p) {
        color: green;
      }
    </style>
    <slot></slot>
  </template>
  <script>
    class CustomEl2 extends Polymer.Element {
      static get is() { return 'custom-el2'; }
    }
    window.customElements.define(CustomEl2.is, CustomEl2);
  </script>
</dom-module>

Подробнее о Polymer <slot> здесь: Styling Slotted Content

Если я не стилизую букву P в c-el1, стили со слотами применяются с селектором :host или без него. Размышление, если это переопределение, которое происходит, ожидается. ура!
Правильно, сегментированные стили должны применяться в любой ситуации, если c-el1 не имеет стиля для p . Переопределение должно происходить в родительском элементе, потому что это дает вам возможность стилизовать дочерние элементы без редактирования источника.

Schrodinger's cat · Answer 2 · 2017-07-30T18-42-00.000Z

Да! <slots> в полимерном элементе, являются ТОЛЬКО рендерингом

предварительно изложенные,
предварительно оформленный контент

Просто потому, что DOM занимает слот на пользовательском элементе, не означает, что этот элемент получает стиль по приоритету.

У нас может быть правило ::slotted для элемента, но любой родительский элемент/страница, использующий указанный слот в пользовательском элементе, получает приоритет для стиля DOM, который он кладет в указанном слоте.

Ссылка

Eric Post Here

Это идеально должно быть документировано громко и ясно на официальной документации на сайте, при моделировании распределенных узлов в качестве примечания может быть