From ac96edec3fe5afc6022b61a2c14c899b6c993dad Mon Sep 17 00:00:00 2001 From: Serhii Kulykov Date: Mon, 17 May 2021 14:19:19 +0300 Subject: [PATCH] Remove mentions of :host-context --- .../6-shadow-dom-style/article.md | 19 ++----------------- 1 file changed, 2 insertions(+), 17 deletions(-) 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 `