Переопределение внешне определенных стилей в веб-компоненте

Я делаю первые шаги в веб-компонентах без используя любые сторонние библиотеки, такие как Polymer. Одним из главных преимуществ продажи является то, что стили веб-компонентов отделены от стилей, определенных в других местах, что позволяет стилизовать shadow-DOM компонента в среде, похожей на песочницу.

Проблема, с которой я сталкиваюсь, заключается в том, как стили каскадируются через элементы с прорезями. Поскольку элементы со слотами не являются частью теневого DOM, их можно изменять только с помощью ::slotted() в шаблоне компонента. Это здорово, но практически невозможно гарантировать, что веб-компонент будет отображаться корректно во всех контекстах, поскольку внешние стили также применяются с непобедимой спецификой * к элементам со слотами.

* кроме !important .

Эта проблема может быть решена следующим образом:

 customElements.define("my-nav",
  class extends HTMLElement {
    constructor() {
      super();

      const template = document.querySelector("template#my-nav").content;
      this.attachShadow({ mode: "open" })
        .appendChild(template.cloneNode(true));
    }
  }
);
 a {
  color: red; /*  >:(  */
}
 <template id="my-nav">
  <style>
    .links-container ::slotted(a) {
      color: lime;
      font-weight: bold;
      margin-right: 20px;
    }
  </style>

  <div class="links-container">
    <slot name="links"></slot>
  </div>
</template>

<p>I want these links to be green:</p>
<my-nav>
  <a href="#" slot="links">Link 1</a>
  <a href="#" slot="links">Link 2</a>
  <a href="#" slot="links">Link 3</a>
</my-nav>

Мне трудно понять значение этой "функции". Мне нужно либо указать свои ссылки в каком-либо другом формате и создать их узлы с помощью JS, либо добавить !important в мое свойство color - которое still не гарантирует согласованности, когда дело касается буквально любого другого свойства, которое я не определил.

Была ли эта проблема где-то решена или ее легко решить, изменив мою легкую структуру DOM? Я не уверен, как еще получить список ссылок в слот.

4 голоса | спросил Scott 23 PMpMon, 23 Apr 2018 18:56:56 +030056Monday 2018, 18:56:56

2 ответа


0
---- +: = 0 =: + ---- специально разработан, чтобы позволить внешнему коду стилизовать содержимое, помещенное в него.Это отличная функция при правильном использовании.Но если вы хотите лучше контролировать то, что отображается в веб-компоненте, вам необходимо скопировать клонированные копии содержимого из ---- +: = 1 =: + ---- в теневой DOM.Тогда у вас есть 100% контроль над CSS.ХОРОШО.У вас действительно есть только 90% -ый контроль, потому что человек, использующий ваш компонент, все еще может установить атрибут ---- +: = 2 =: + ---- .Как видно из приведенного выше примера, третья ссылка все еще красная, потому что мы установили атрибут ---- +: = 6 =: + ---- .Если вы хотите предотвратить это, вам нужно убрать атрибут ---- +: = 7 =: + ---- из внутреннего содержимого.Я даже создал несколько компонентов, которые позволяют уникальным дочерним элементам читать и преобразовывать их в собственные внутренние узлы.Подумайте о теге ---- +: = 11 =: + ---- и его ---- +: = 12 =: + ---- детей.Эти дети на самом деле ничего не рендерит, они просто способ хранения данных, которые используются для указания исходного местоположения видео, которое будет воспроизводиться.Ключевым моментом здесь является понимание того, для чего предполагается использовать ---- +: = 13 =: + ----, и использовать его таким образом, не пытаясь заставить его сделать то, чего он никогда не собирался делать.БОНУСНЫЕ ОЧКИПоскольку ---- +: = 14 =: + ---- вызывается каждый раз, когда этот узел помещается в DOM, вы должны быть осторожны, чтобы каждый раз удалять что-либо из теневого DOM, иначе вы будете дублировать дочерние элементы снова и снова.,Поэтому удаление дублированных узлов важно:
ответил Intervalia 24 PMpTue, 24 Apr 2018 17:22:23 +030022Tuesday 2018, 17:22:23
0
Вы правы, нет другого решения, кроме как использовать ---- +: = 0 =: + ---- для каждого свойства CSS.Вместо этого я бы не использовал ---- +: = 1 =: + ---- и копировал нужные вам узлы:
ответил Supersharp 23 PMpMon, 23 Apr 2018 22:08:30 +030008Monday 2018, 22:08:30

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132