Merge pull request #2605 from web-padawan/patch-1

iliakan · web-flow · commit e4ac60330b02 · 2021-06-13T11:03:56.000+03:00
Remove mentions of :host-context
diff --git 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: `<custom-dialog centered>`.
 
-## :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 `<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.
+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 `<style>` or `<link rel="stylesheet">`.
 
 Local styles can affect:
 - 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.
 
 Document styles can affect:
