Web Components - Styles
Продолжаем разбираться с веб-компонентами. В предыдущем уроке 👉 • Web Components - Slots мы поговорили про slots. Зачем они нужны и какие бывают.
В этом уроке мы рассмотрим стилизацию веб-компонентов. А тут, поверьте, есть о чем поговорить. Рассмотрим стилизацию путем указания стилей в тег style. Разберем альтернивные варианты стилизации, такие как, подключение внешних стилей с помощью link, загрузка через fetch и CSSStyleSheet. Что это такое и чем он отличается от style.
Также посмотрим на CSS Custom Properties (они же CSS переменные), и на то, что они присутствуют сразу в Light DOM и Shadow DOM одновременно и какие это нам дает возможности.
Разберем все возможные псевдоэлементы и псевдоклассы, доступные для веб-компонентов.
::part - позволяющий стилизовать отдельные части извне.
:host - для стилизации элемента-хозяина веб-компонента.
:host-context - стилизующий компонент, в зависимости от того, где он находится.
::slotted - для стилизации контента внутри slots.
:has-slotted - для стилизации слотов, на основании того, есть ли у них контент или нет.
И немного затронем :state.
#js #javascript #frontend #css #css3 #html #web #webdevelopment #htmlcss #html5 #csshtml #css3html5 #css3code #css3tutorial #htmltutorial #htmlelements #csscourse #csstutorialscool #csstricks #webcomponents #csshovereffect #csshover #csshovereffects #webdev #cssanimation #csstransition #csstricks #htmlcss3 #fullstack #cssamazing #cssfeatures #csseasy #cssbasic #csslesson #csscourse #cssteach #vue #react #angular #svelte #vanillajs #animation #cssawesome #learncss #course #programming #crash_course #learning #fariga #vuejs #htmltutorial #tutorial #webanimation #webapi #api #animation
Подписывайтесь на меня в соц. сетях:
👨💻 LinkedIn - / maksymfariga
📷 Instagram - / maksym_fariga (@maksym_fariga)
📖 Facebook - / maksymfariga
🐤 Twitter - / fariga_m
🛩 Telegram - https://t.me/web_education_new
Web Components - Основы 👉 • Web Components - Основы. Знакомство с...
Web Components - Оптимизация 👉 • Оптимизация - Web Components
Web Components - Жизненный цикл 👉 • Web Components - Жизненный цикл!
