Как создать область видимости стиля для произвольного контента с помощью полимерных / веб-компонентов

Я пытаюсь и не могу создать простой веб-компонент только для целей определения стиля.

Идея состоит в том, что я определил бы компонент, скажем <scoped-style>, который @import составляет таблицу стилей, так что любой экземпляр <scoped-style> будет охватывать импортированную таблицу стилей для меня. Я просто хочу разделить стили внутри элементов и без них.

Пока я даже не смог с помощью Polymer создать компонент, который применяет стили на основе <style> к произвольному контенту, который может содержать любой экземпляр. Похоже, что контент, который идет в <content></content>, можно стилизовать только с помощью

:host ::content [selector] {
  /* shadowy styles */
}

Это чрезвычайно ограничивает и разрушает мой план @import.

Вот определение компонента:

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="scoped-style">
    <style>
        p {
            background: red;
        }
    </style>
    <template>
        <div>
            <p>Paragraph outside content (below) which _does_ go red</p>
            <content></content>
        </div>
    </template>
    <script>
        Polymer({
            is: "scoped-style"
        });
    </script>
</dom-module>

И вот что я намерен использовать:

<scoped-style>
  <p>This paragraph should _also_ go red, but doesn't.</p>
</scoped-style>

Большое спасибо!


javascript web-component polymer shadow-dom
person heydon    schedule 23.06.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Нет, верно. В Руководстве по элементам стиля отмечается:

Распределенный [элемент - <p>, в вашем случае] остается [черным], потому что логически он все еще находится на родительской странице и, следовательно, соответствует scoped-style > p. Он просто отображается где-то в другом месте (на земле Shadow DOM).

person stopsatgreen    schedule 23.06.2015
comment
Хорошо, спасибо, Питер. Теперь ... как мне делать то, что я хочу делать? Я чувствую, что вся эта установка предлагает мне очень мало полезности. Вы знаете, как применить стили к произвольному HTML? Я посмотрел scoped полифиллы, но они просто добавляют класс с javascript. Мусор. - person heydon; 23.06.2015