Могу ли я сделать стиль шаблона внешним?

StackOverflow https://stackoverflow.com//questions/25043776

  •  21-12-2019
  •  | 
  •  

Вопрос

В Урок 1 Google Polymer, у них есть пример, который включает встроенную таблицу стилей.Я бы хотел переместить его в css-файл, но стиль находится внутри тега шаблона.Что еще хуже, там написано, что это

Используемый внутри теневого DOM-дерева псевдокласс :host соответствует элементу, в котором размещено дерево.В этом случае он соответствует элементу.

Q:Могу ли я переместить этот стиль в css-файл?

Это было полезно?

Решение

Если вы хотите стилизовать элементы, которые являются частью теневого DOM пользовательских элементов, вы должны использовать ::shadow селектор, или /deep/ селектор, если вы хотите выбирать элементы независимо от того, на сколько уровней глубже они находятся внутри Shadow DOM.

Таким образом, снаружи вы бы оформили p элемент, который находится внутри x-fooТеневой ДОМ вот такой:

x-foo::shadow p {

}

Вы можете прочитать обо всем этом здесь: http://www.polymer-project.org/articles/styling-elements.html

Другие советы

Если вы загружаете элемент семян из Эта страница (или простоПосмотрите на перечисленное содержимое), вы увидите, что он использует внешний файл CSS.Вы можете исследовать элемент HTML, чтобы увидеть, как он используется, но это очень просто: 

<polymer-element name="seed-element" attributes="notitle author">

  <template>

    <link rel="stylesheet" href="seed-element.css" />

    <h1>Hello from seed-element</h1>
    <content></content>

  </template>
  <script>

    Polymer('seed-element', {
      //...
    }
  </script>
</polymer-element>
.

Тогда в Seed-Element.css по умолчанию у вас есть следующее: 

:host {
  display: block;
}
.

То, как я понимаю (в моих ограниченных знаниях) заключается в том, что если вы должны были переименовать элемент семян в мой элемент, это было бы так же, как и делает 

my-element {
  display: block;
}
.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top