Fixes for Firefox

Author: koddsson

examples/index.html

@@ -9,6 +9,8 @@
     <toot-embed src="https://sunny.garden/@knowler/109487032491438808"></toot-embed>
 
     <script type="module">
+      import 'https://cdn.skypack.dev/pin/urlpattern-polyfill@v6.0.2-Xkk1InwdFsTyUXRMqTq0/mode=imports,min/optimized/urlpattern-polyfill.js'
+      import 'https://cdn.skypack.dev/pin/element-internals-polyfill@v1.1.18-z4BovnhHcCqD1ZdZNRfe/mode=imports,min/optimized/element-internals-polyfill.js'
       // import 'https://unpkg.com/@github/toot-embed-boilerplate@latest/dist/toot-embed.js'
       import '../src/toot-embed-element.ts'
     </script>

src/toot-embed-element.ts

@@ -1,18 +1,36 @@
 const html = String.raw
 const styles = new CSSStyleSheet()
 styles.replaceSync(`
-:host(:not(:--loading)) {
-  display: grid;
-  max-inline-size: 36em;
-  padding: 0.5em;
-  gap: 0.5em;
-  border: 0.0625em solid grey;
-  border-radius: 0.5em;
-  grid-template:
-    "avatar   author-link author-link" max-content
-    "content  content     content"     max-content
-    "backlink backlink    backlink"    max-content
-    / min-content auto auto;
+@supports selector(:--loading) {
+  :host(:not(:--loading)) {
+    display: grid;
+    max-inline-size: 36em;
+    padding: 0.5em;
+    gap: 0.5em;
+    border: 0.0625em solid grey;
+    border-radius: 0.5em;
+    grid-template:
+      "avatar   author-link author-link" max-content
+      "content  content     content"     max-content
+      "backlink backlink    backlink"    max-content
+      / min-content auto auto;
+  }
+}
+
+@supports not selector(:--loading) {
+  :host(:not([internals-loading])) {
+    display: grid;
+    max-inline-size: 36em;
+    padding: 0.5em;
+    gap: 0.5em;
+    border: 0.0625em solid grey;
+    border-radius: 0.5em;
+    grid-template:
+      "avatar   author-link author-link" max-content
+      "content  content     content"     max-content
+      "backlink backlink    backlink"    max-content
+      / min-content auto auto;
+  }
 }
 
 [part="avatar"] {