mdn: mdn: handle scrim-inline elements

Make it look like external links, which should not be used for offline depls.
Close #1071

Author: myfreeer

src/mdn/inject/inject.css

@@ -363,7 +363,9 @@ div > section.place {
   margin: 0;
 }
 
+/* https://github.com/website-local/mdn-local/issues/1071 */
 .curriculum-content-container.curriculum-module .curriculum-content scrim-inline[url],
 .curriculum-content-container.curriculum-overview .curriculum-content scrim-inline[url] {
   aspect-ratio: auto;
+  margin: 0;
 }

src/mdn/inject/inject.js

@@ -964,4 +964,33 @@
     console.warn('toc-scroll-highlight', e);
   }
   /// endregion toc-scroll-highlight
+
+  /// region scrim-inline
+  // mdn: handle scrim-inline elements #1071
+  // https://github.com/website-local/mdn-local/issues/1071
+  function scrimCustomElement() {
+    // Create a class for the element
+    class ScrimInline extends window.HTMLElement {
+      constructor() {
+        super();
+        var a = document.createElement('a');
+        a.href = this.getAttribute('url');
+        a.innerText = this.getAttribute('scrimtitle');
+        a.className = 'external';
+        a.target = '_blank';
+        this.appendChild(a);
+      }
+    }
+
+    // Define the new element
+    window.customElements.define('scrim-inline', ScrimInline);
+
+  }
+
+  try {
+    scrimCustomElement();
+  } catch (e) {
+    console.warn('scrim-inline', e);
+  }
+  /// endregion scrim-inline
 }();