chore: update scopedElementsMixin documentation (#2217)

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(
+import '@webcomponents/scoped-custom-element-registry';
-  this.constructor.getScopedTagName('lion-input', this.constructor.scopedElements),
-);
 ```
 
-## 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.
+```js
-We already avoid query selectors internally in lion, but just be aware that a selector like
+polyfillsLoader({
-
+  polyfills: {
-```css
+    scopedCustomElementRegistry: true,
-lion-input {
+  },
-  padding: 20px;
+});
-}
 ```
 
-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