Использование существующих селекторов CSS для применения стилей в Shadow DOM к пользовательским элементам - PullRequest
Новая
       61

Использование существующих селекторов CSS для применения стилей в Shadow DOM к пользовательским элементам

0 голосов
/ 20 апреля 2020

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

В моем случае у меня есть компонент <custom-avatar>, и он все настроен должным образом с автономными стилями и функциональностью, все просто превосходно.

В определенных случаях использования приложение Для отображения необходимо сложить аватары, расположив их немного друг над другом по диагонали, и шаблон, который я использую, использует простой компонент <custom-composite-avatar>. Все, что это делает, это оборачивает выделенное содержимое в <div> с правильным классом стилей, но ключевым аспектом является сохранение способности к гибкому повторному использованию, например так: 

<custom-composite-avatar>
  <custom-avatar title="first"></custom-avatar>
  <custom-avatar title="second"></custom-avatar>
</custom-composite-avatar>

Хитрый бит заключается в стили, импортируемые из monorepo, который предоставляет те же модули BEM-i sh CSS и component CSS для других разновидностей библиотеки компонентов, таких как React, Vue, et c. У меня есть стили avatar и composite-avatar, импортированные просто отлично, но принудительное отображение предполагаемого перекрытия определяется с помощью иерархического селектора .my-composite-avatar.my-composite-avatar--medium .my-avatar {}

То есть с классом .my-composite-avatar, примененным к оболочке div в <custom-composite-avatar> и класс .my-avatar, примененный к оболочке в <custom-avatar> и его собственном Shadow DOM, этот селектор parent / child CSS не годится.

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

Спасибо за чтение, ваши идеи ценятся!

1 Ответ

2 голосов
/ 20 апреля 2020

Я бы посоветовал подружиться с CSS свойствами
, потому что они просачиваются в shadowDOM после CSS селекторов.

пример

У меня есть элемент <SVG-ICON>, берущий конфигурацию из атрибутов ИЛИ CSS свойства
с моими любимыми строками кода ( из этого компонента): 

let val = this.getAttribute(attr) 
           || 
          getComputedStyle(this)
           .getPropertyValue("--svg-icon-" + attr)
           .replace(/"/g, "")
           .trim();

Позволяет для вашей стандартной конфигурации атрибута: 

  <svg-icon name="configuration" fill="grey"></svg-icon>

Но более мощный ( упрощенный пример ): 

  <style>
    body {
      --svg-icon-fill: "grey";
    }
    svg-icon[selected] { 
      --svg-icon-fill: "green";
    }
  </style>

  <svg-icon name="messages" selected></svg-icon>
  <svg-icon name="configuration"></svg-icon>

CSS = Пользовательские сценарии строк

Это не часто случается, но иногда самый простой код делает я очень счастлив.

Нет Стиль Ограничение!

Эти 2 строки позволяют любая строка, которую вы хотите в CSS свойствах: 

    .replace(/"/g, "")
    .trim();

Пример 

<style>
   [name*="globe"] {
      --svg-icon-tile: "rect:0,0,24,24,0,fill='blue'";
      --svg-icon-stroke: white;
   }
</style>
<svg-icon name="feather-icons-globe"></svg-icon>

* --svg-icon-tile не имеет ничего общего с CSS, он читается (и синтаксический анализ) с помощью <SVG-ICON> connectedCallback() кода для создания SVG-фона / плитки для всех значков с именем globe .

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *. , но без них ваша IDE будет жаловаться на недопустимый CSS.

Получайте удовольствие от кодирования ... вы потянете за волосы, когда начнете с cal c () в ваших CSS свойствах ...
Но вы можете перевести 'CSS' на другой уровень.

PS.

И отслеживать будущее ConstructAble StyleSheets aka ConstructIble StyleSheets aka Constructed Sheets aka AdoptedStyleSheets :

...