Custom elements в бою

[i360u]

Повлиять на стиль компонента с Shadow DOM легко: стили уровня :host могут быть переопределены снаружи как и у любого другого DOM-элемента. Для пробрасывания свойств в более глубокие слои — используются CSS-переменные, и это значительно лучше и удобнее отсутствия инкапсуляции. Microsoft поддержку пилит в данный момент (официальный статус). Хотя, конечно, не известно сколько они ее будут еще пилить, возможно и не успеют до перехода на новый движок с такими темпами. Остальное тоже, так или иначе, решается, но если нужна поддержка IE — наверное не стоит связываться. Зависит от того, сколько у вас реальных юзеров на IE.

[Vahman]

К сожалению, процент пользователей IE крайне высок.

Повлиять на стиль компонента с Shadow DOM легко: стили уровня :host могут быть переопределены снаружи как и у любого другого DOM-элемента

Я имел в виду стили именно не host уровня, а те, что сидят под shadowRoot компонента. вот пример того что я имею в виду в index.html я пытаюсь повлиять на стиль .test-class, но нет никакого эффекта. Именно поэтому для части компонент, например, календаря, пришлось отказаться от использования shadowRoot, так как часть стилей (цвета, например) иногда нужно переопределять. Скажем, в angular, вроде можно было использовать :ng-deep для таких целей

[i360u]

К сожалению, процент пользователей IE крайне высок.

Больше чем в среднем по статистике? caniuse.com/usage-table

в index.html я пытаюсь повлиять на стиль .test-class, но нет никакого эффекта

Снаружи:

:root {
--color: #F00;
}

Внутри компонента (из Вашего примера):

  connectedCallback() {
    let shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `<style>
    .test-class {
      background-color: var(--color, #EEE);
    }
    </style>
    <div class="test-class">Test text</div>`
  }

И да, шаблон лучше добавлять не в connectedCallback, а в конструкторе и не парсить каждый раз HTML а клонировать (cloneNode) из заранее созданного контейнера template. И вообще, лучше создать базовый класс блэкджеком и биндингами и наследоваться от него.

[Vahman]

Больше чем в среднем по статистике?

О да, в десятки раз. Примерно половина.

И вообще, лучше создать базовый класс блэкджеком и биндингами и наследоваться от него

В статье упоминался lit-element, как вариант.

Спасибо за :root — поэкспериментирую (проверил на stackblitz — работает). Если добавить в документацию к компонентам — вполне себе решение

[i360u]

Я использую два базовых метода параметризации стилей: через кастомные атрибуты и через CSS-переменные. В сочетании они дают полный контроль над всем необходимым:

<my-button big style="--color: #F00">Press Me!</my-button>

[Vahman]

Я понял ваш способ, но только что нашел один недостаток. Перегрузить можно только то что предусмотрел разработчик компонента. То есть на самом деле, если внутри shadow написано строго display: block, то я не смогу снаружи это поведение изменить.

[i360u]

Ну в этом ведь и смысл Shadow DOM, не совсем понимаю как это можно называть недостатком…

[justboris]

спасибо за статью, интересный опыт!

полифилы от webcomponent ломают что-то внутри ангуляра, вызывая переполнение call stack

Я так понимаю, речь про эту issue? Я тоже сталкивался, знакомо.

[Vahman]

Да, это именно оно. В итоге полечил, но осадок остался

[Vahman]

Кстати, можете поделиться своим решением? Вдруг то, что смогли придумать Вы — элегантнее того что я нашел на просторах. Я пока что просто подключил другие полифилы до того, как подключается webcomponents-loader, чтобы он не стал загружать свои.

[justboris]

моим решением было убедить руководство, что нам лучше перестать поддерживать IE11, чем бороться с этими багами :)

[Vahman]

Вы счастливый человек. У нас, к сожалению пока нет такой возможности. Точнее любое начальство, которое вообще станет со мной говорить, не сможет повлиять на выбор ПО в масштабе всех предприятий, где используется наш софт. Пользователи, конечно, ставят chrome, он не запрещен, но попадаются товарищи, которые используют ie говоря: «это стандарт компании, одобрено безопасностью, и тому подобное»

[dagot32167]

Спасибо за статью. Для adoptedCallback() я так же не могу придумать живой пример применения

[Vahman]

Это интересно, на самом деле. Что имели в виду авторы стандарта? Ведь при добавлении в новый документ, и в его DOM по сути может стрельнуть и connectedCallback(). Для чего эти методы отделили я пока не могу придумать