CSS область видимости

Модуль CSS область видимости определяет механизмы CSS области видимости и инкапсуляции, ориентируясь на механизм тени DOM области видимости.

CSS стили либо глобальны по области видимости, либо ограничены деревом тени. Стиль глобальной области видимости применяется ко всем элементам в дереве узлов, которые соответствуют селектору, включая пользовательские элементы в этом дереве, но не к деревьям тени, составляющим каждый пользовательский элемент. Селекторы и их связанные определения стилей не влияют друг на друга между областями видимости.

Внутри CSS дерева тени селекторы не выбирают элементы за пределами дерева, ни в глобальной области видимости, ни в других деревьях тени. Каждый пользовательский элемент имеет собственное дерево тени, которое содержит все компоненты, составляющие пользовательский элемент (но не сам пользовательский элемент или "хост").

Иногда полезно стилизовать хост из контекста дерева тени. Модуль CSS области видимости делает это возможным, определяя селекторы, которые:

Позволяют дереву тени стилизовать свой хост.
Позволяют внешнему CSS стилизовать элементы внутри тени DOM (но только если связанный пользовательский элемент настроен на принятие внешних стилей).

Справочник

Селекторы

Руководства

Веб-компоненты: Введение в различные технологии, используемые для создания повторно используемых веб-компонентов — пользовательских элементов, функциональность которых инкапсулирована отдельно от остальной части вашего кода.
Использование тени DOM: Основы тени DOM, включая прикрепление тени DOM к элементу, добавление в дерево тени DOM и стилизация.
Использование шаблонов и слотов: Определение повторно используемой структуры HTML с помощью <template> и <slot> элементов и использование этой структуры внутри веб-компонентов.
Использование пользовательских элементов: Введение в API пользовательских элементов, JavaScript API, используемый для создания пользовательских элементов, которые инкапсулируют функциональность.

Связанные понятия

CSS :defined псевдокласс
CSS ::part псевдоэлемент
HTML <template> элемент
HTML <slot> элемент
HTML slot атрибут
Дерево тени термин глоссария
DOM термин глоссария
Составной селектор термин
Список селекторов термин
Веб-компоненты интерфейсы, свойства и методы
- CustomElementRegistry интерфейс
- Element API
  - Element.slot свойство
  - Element.assignedSlot свойство
  - Element.attachShadow() метод
- HTMLSlotElement интерфейс
- HTMLTemplateElement интерфейс
- ShadowRoot интерфейс

Примечание: Несмотря на название, псевдокласс :scope, который представляет элементы, являющиеся точкой отсчета (или областью видимости) для сопоставления селекторов, определен в модуле Селекторы. В противном случае он не связан с модулем CSS области видимости, который фокусируется на области видимости в отношении механизма области видимости тени DOM.

Спецификации

Спецификация
Модуль CSS области видимости уровень 1

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scoping