jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Remove mentions of :host-context

Browse source
This commit is contained in:
Serhii Kulykov 2021-05-17 14:19:19 +03:00 • committed by GitHub
parent 18a039473a
commit ac96edec3f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 2 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

19
8-web-components/6-shadow-dom-style/article.md
View file

@ -111,22 +111,7 @@ customElements.define('custom-dialog', class extends HTMLElement {
Now the additional centering styles are only applied to the first dialog: `<custom-dialog centered>`. Now the additional centering styles are only applied to the first dialog: `<custom-dialog centered>`.
## :host-context(selector) To summarize, we can use `:host`-family of selectors to style the main element of the component. These styles (unless `!important`) can be overridden by the document.
Same as `:host`, but applied only if the shadow host or any of its ancestors in the outer document matches the `selector`.
E.g. `:host-context(.dark-theme)` matches only if there's `dark-theme` class on `<custom-dialog>` on anywhere above it:
```html
<body class="dark-theme">
<!--
:host-context(.dark-theme) applies to custom-dialogs inside .dark-theme
-->
<custom-dialog>...</custom-dialog>
</body>
```
To summarize, we can use `:host`-family of selectors to style the main element of the component, depending on the context. These styles (unless `!important`) can be overridden by the document.
## Styling slotted content ## Styling slotted content
@ -317,7 +302,7 @@ Shadow DOM can include styles, such as `<style>` or `<link rel="stylesheet">`.
Local styles can affect: Local styles can affect:
- shadow tree, - shadow tree,
- shadow host with `:host`-family pseudoclasses, - shadow host with `:host` and `:host()` pseudoclasses,
- slotted elements (coming from light DOM), `::slotted(selector)` allows to select slotted elements themselves, but not their children. - slotted elements (coming from light DOM), `::slotted(selector)` allows to select slotted elements themselves, but not their children.
Document styles can affect: Document styles can affect: