ScopedCSS is is currently under development. Please submit an issue on our github repo should you have a suggestion.
By default, regular CSS selectors work as exepcted when run on a scope from a stylesheet or the regular
querySelectorAll() DOM methods. A few other selectors, however, have been created or redesigned specifically for accessing scoped elements. These selectors are only available in scoped CSS and the new Scope Selector API.
:scope Pseudo Class - This is a regular selector that always matches the element on which it is run.
:root Pseudo Class - When run within a scope, this regular selector works to match the scope's root element.
# Selector - When run on a scope root, this regular selector works differently to match elements by
scoped:id instead of
scoped:id is a scope's own ID attribute.)
@ Selector - This selector works to match elements that are semantically scoped to the element on which it is called.
/ Notation - This selector is used to access nested scopes.
The behaviour of these selectors becomes clearer as we put them to use in Scoped CSS and the Scope Selector API.
Scoped HTML introduces two new methods, the
scopeSelectorAll() methods, for querying a scope using CSS selectors, much like the
querySelectorAll() methods. The distinguishing factor is that only elements within the boundaries of the scope are matched. Additionally, the ID selector
# is mapped to the
scoped:id attribute instead of the
// Let's retrieve the #article element itself using document.querySelector()let article = document.querySelector('#article');// Let's query elements by "scoped-id"let articleTitle = article.scopeSelector('#title');let articleContent = article.scopeSelector('#content');// Chained queries would just take us into nested scopeslet articleAuthorName = article.scopeSelector('#author').scopeSelector('#name');