Недавно я создал систему дизайна на основе веб-компонентов, используя StencilJS. Впоследствии я хотел найти решение для создания сайта документации на основе автоматически созданных документов компонентов из StencilJS. В итоге я создал для этого стартер GatsbyJS и подумал, что расскажу, как легко было использовать как Stencil, так и Gatsby. 🖥 См. Сайт действующей документации 📓 Просмотрите исходный код на Github ✏️ Что такое StencilJS? StencilJS - это набор инструментов..

Например, если вы используете веб-компоненты с LitElement, а затем пытаетесь использовать document.querySelector, и он ничего не находит в документе, но вы можете четко видеть это в инструментах разработчика. Очень раздражает, а затем вы ищете «веб-компоненты document.querySelector» и не получаете хороших результатов! ладно, сейчас все супер надоедает! Причина в том, что веб-компоненты могут использовать новый ShadowDom, который инкапсулирует элементы DOM, которые могут быть присоединены..

В последнее время пользователи Internet Explorer 11 сообщали, что стиль нашего приложения внезапно «ломался»: при открытии диалога все последующие страницы теряли свой стиль. Страшный. Мы быстро заметили в консоли разработчика IE11, что открытие диалогового окна вызвало исключение Unable to get property '_propertyInfo' of undefined or null reference . Это исключение нарушило дальнейшую работу стиля. Пока все (не)хорошо. Но откуда взялось исключение? Удалив один элемент за..

Как создавать стандартные, надежные компоненты Исторически сложилось так, что компоненты HTML страдали от хрупкого дизайна и мало гибкости. Так быть не должно. Теперь есть стандартный способ предоставить потребителям возможность настраивать компоненты. Введите CSS для веб-компонентов Похоже, что два аспекта веб-компонентов противостоят друг другу: изоляция и настройка. Как разработчики могут изолировать внутренние правила CSS от внешнего мира? И как потребители могут стилизовать..