Подтвердить что ты не робот

Лучший способ справиться с наложением полимерного элемента

Для элемента типа:

<polymer-element name="custom-element">
    <template>
        <style>
            #container {
                color: red;
            }
        </style>
        <div id="container" on-click="{{clickContainer}}">
            ... lots of other stuff here ...
        </div>
    </template>
    <script>
        Polymer('custom-element', {
            clickContainer: function() {

            }
        });
    </script>
</polymer-element>

Я хотел бы иметь еще один элемент, который обертывает первый:

<polymer-element name="my-custom-element" extends="custom-element">
    <!-- extra styling -->
    <script>
        Polymer('my-custom-element', {
            clickContainer: function() {
                this.super();
            }
        });
    </script>
</polymer-element>

Мои проблемы:

Какой лучший способ указать дополнительный стиль?
Можно ли обернуть базовый элемент в дополнительную разметку (например, другой контейнер)?
Можно ли выбрать элементы из базового элемента? Что-то вроде <content select=".stuff">, но для разметки базовой тени.

Ответ 1

Какой лучший способ указать дополнительный стиль?

Поместите шаблон внутри подкласса (my-custom-element), как обычно.
Включите элемент <shadow></shadow>, где вы хотите, чтобы шаблон суперкласса отображался.
Поместите тег стиля в новый шаблон.
Чтобы стилизовать элементы из шаблона суперкласса, используйте селектор, например:

:host::shadow .someclass { ... }

См. пример ниже.

Можно ли обернуть базовый элемент в дополнительную разметку (например, другой контейнер)?

Да, вы можете поместить любую разметку вокруг <shadow></shadow>.

<div>
  <shadow></shadow>
</div>

Можно ли выбрать элементы из базового элемента? Что-то вроде <content select=".stuff">, но для разметки базовой тени.

Нет. Вы не можете так проецироваться (это в обратном направлении от всех других проекций).

Если вы действительно хотите вырезать узлы из старого теневого корня, это можно сделать в коде, вытащив узлы непосредственно из this.shadowRoot.olderShadowRoot. Но это может быть сложно, потому что у суперкласса могут быть ожидания относительно структуры.

Пример кода:

<polymer-element name="my-custom-element" extends="custom-element">
<template>

  <style>
      /* note that :host::shadow rules apply 
         to all shadow-roots in this element,
         including this one */
      :host::shadow #container { 
        color: blue;
      }
      :host {
        /* older shadow-roots can inherit inheritable 
           styles like font-family */
        font-family: sans-serif;
      }
  </style>
  <p>
    <shadow></shadow>
  </p>

</template>
<script>

  Polymer('my-custom-element', {
    clickContainer: function() {
      this.super();
    }
  });

</script>
</polymer-element>

Подсказки:

olderShadowRoot будет существовать независимо от того, включаете ли вы тег <shadow></shadow> или нет, но он не будет частью предоставленного DOM, если вы этого не сделаете.
Чтобы предотвратить создание olderShadowRoot(s), вы можете переопределить parseDeclarations (источник). Любой из parseDeclarations, parseDeclaration, fetchTemplate может быть переопределен для различных эффектов.