Скажем, у меня есть два пользовательских элемента, определяемые как расширения Полимерного элемента:
шаблоны:
<dom-module id="c-el1">
<template>
<style>
p{
color:red;
}
</style>
<c-el2>
<p>custom text</p>
</c-el2>
</template>
</dom-module>
<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
<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
Да! <slots>
в полимерном элементе, являются ТОЛЬКО рендерингом
Просто потому, что DOM занимает слот на пользовательском элементе, не означает, что этот элемент получает стиль по приоритету.
У нас может быть правило ::slotted
для элемента, но любой родительский элемент/страница, использующий указанный слот в пользовательском элементе, получает приоритет для стиля DOM, который он кладет в указанном слоте.
Это идеально должно быть документировано громко и ясно на официальной документации на сайте, при моделировании распределенных узлов в качестве примечания может быть
:host
или без него. Размышление, если это переопределение, которое происходит, ожидается. ура!c-el1
не имеет стиля дляp
. Переопределение должно происходить в родительском элементе, потому что это дает вам возможность стилизовать дочерние элементы без редактирования источника.