Разметка в HTML-компоненте анализируется, отображается и оформляется как обычный HTML. Затем этот HTML-код автоматически обновляется после выполнения JavaScript-кода, связанного с пользовательским тегом элемента.
В отличие от этого, разметка «обычного» веб-компонента (использующего Shadow DOM) генерируется динамически во время выполнения с помощью JavaScript — что-то вроде одностраничного приложения (SPA).
Эта компонентная архитектура — действительно отличный кандидат для системы маркетингового дизайна (и, в качестве бонуса, позволяет избежать некоторых серьезных проблем, связанных с обычными веб-компонентами).
Это идеальная реализация концепции постепенного улучшения пользовательского интерфейса.
Он использует минимальный и самодостаточный JavaScript — HTML-веб-компоненты можно рассматривать как изолированные объекты.
Вы по-прежнему можете использовать API пользовательских элементов для реализации таких вещей, как варианты компонентов системы проектирования.
Разметка компонентов полностью поддерживает SSR.
Разметку компонента можно оформлять так же, как и обычный HTML.
Стандартные методы обеспечения доступности могут применяться без проблем.
Но, несмотря на все эти преимущества, у нас по-прежнему остается исходная проблема. HTML Web Components требуют JavaScript.
CSS Веб-компоненты
Итак, вопрос: что произойдет, если мы возьмем за основу идеи HTML Web Components и полностью откажемся от JavaScript?
Вы получаете веб-компоненты CSS.
Примечание: Я никогда раньше не встречал описания или названия для этой концепции, поэтому использую термин «CSS Web Components» для её описания. Но, пожалуйста, сообщите мне, если кто-то уже писал об этом и дал этому название!
Как они работают? Точно так же, как и HTML Web Components, но вы просто используете возможности CSS для реализации ключевой функциональности.
В качестве примера давайте реализуем этот компонент «дорожки»:
<swim-lane>
<section>
<h2>Creativity unleashed</h2>
<p>A brand new way of illustrating for the web.</p>
<a href="/product">Learn more</a>
</section>
<img src="product.jpg" alt="Product image" />
</swim-lane>
<style>
swim-lane {
display: flex;
align-items: center;
gap: 2rem;
color: white;
background: black;
padding: 1rem;
border-radius: 16px;
}
swim-lane h2 {
/* Swimlane title styles /
}
swim-lane p {
/ Swimlane description styles /
}
swim-lane a {
/ Swimlane link styles /
}
@media (max-width: 650px) {
/ Mobile responsive styles */
}
</style>