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

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

<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 может быть переопределен для различных эффектов.