From 21a4ef5452af75d96788b86b27a9985de3950220 Mon Sep 17 00:00:00 2001
From: gerjanvangeest <gerjanvangeest@users.noreply.github.com>
Date: Mon, 11 Mar 2024 14:35:21 +0100
Subject: [PATCH] chore: update scopedElementsMixin documentation (#2217)

---
 docs/guides/principles/scoped-elements.md | 31 +++++++++++++----------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/docs/guides/principles/scoped-elements.md b/docs/guides/principles/scoped-elements.md
index 3e0bd9a1b..01e708c22 100644
--- a/docs/guides/principles/scoped-elements.md
+++ b/docs/guides/principles/scoped-elements.md
@@ -30,28 +30,31 @@ class MyElement extends ScopedElementsMixin(LitElement) {
 }
 ```
 
-## Query selectors
+## Polyfill
 
-Since Scoped Elements changes tagnames under the hood, a tagname querySelector should be written like this:
+This package requires use of the Scoped Custom Element Registry polyfill. Make sure to load it as the first thing in your application:
 
 ```js
-this.querySelector(
-  this.constructor.getScopedTagName('lion-input', this.constructor.scopedElements),
-);
+import '@webcomponents/scoped-custom-element-registry';
 ```
 
-## CSS selectors
+If you're using `@web/rollup-plugin-polyfills-loader`, you can use it in your rollup config like this:
 
-Avoid tagname css selectors.
-We already avoid query selectors internally in lion, but just be aware that a selector like
-
-```css
-lion-input {
-  padding: 20px;
-}
+```js
+polyfillsLoader({
+  polyfills: {
+    scopedCustomElementRegistry: true,
+  },
+});
 ```
 
-will stop working.
+If you're using `@web/dev-server` for local development, you can use the `@web/dev-server-polyfill` plugin:
+
+```js
+polyfill({
+  scopedCustomElementRegistry: true,
+});
+```
 
 ## Edge cases