diff --git a/8-web-components/6-shadow-dom-style/article.md b/8-web-components/6-shadow-dom-style/article.md index 83a6962f..98e246a7 100644 --- a/8-web-components/6-shadow-dom-style/article.md +++ b/8-web-components/6-shadow-dom-style/article.md @@ -111,22 +111,7 @@ customElements.define('custom-dialog', class extends HTMLElement { Now the additional centering styles are only applied to the first dialog: ``. -## :host-context(selector) - -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 `` on anywhere above it: - -```html - - - ... - -``` - -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. +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. ## Styling slotted content @@ -317,7 +302,7 @@ Shadow DOM can include styles, such as `