Apply review suggestions

mdn · Oct 1, 2022 · 20f8420 · 20f8420
1 parent 08df46b
commit 20f8420
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 13 deletions.
diff --git a/files/en-us/web/progressive_web_apps/responsive/mobile_first/index.md b/files/en-us/web/progressive_web_apps/responsive/mobile_first/index.md
@@ -269,8 +269,8 @@ We can, therefore, save the bandwidth for browsers that don't need it.
 
 Back to Modernizr! The reason why it is so useful is that it provides a mechanism to selectively serve both CSS and JavaScript. Modernizr stores the results of all its feature tests as classes on the HTML element. For example, the Modernizr in our example app is testing for multiple background image and rgba support. When they are not supported, the `<html>` tag looks like this:
 
-```html
-<html class="js no-rgba no-multiplebgs"></html>
+```html-nolint
+<html class="js no-rgba no-multiplebgs">
 ```
 
 When these are present, we can serve alternative styling rules to provide sensible fallbacks using descendant selectors — see the following in my code.

diff --git a/files/en-us/web/svg/element/script/index.md b/files/en-us/web/svg/element/script/index.md
@@ -16,16 +16,33 @@ The SVG `script` element allows to add scripts to an SVG document.
 
 ## Example
 
-```html
-<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+```html-nolint
+Click the circle to change colors.
+<svg viewBox="0 0 10 10" height="120px" width="120px" xmlns="http://www.w3.org/2000/svg">
   <script>
-    // <![CDATA[ window.addEventListener('DOMContentLoaded', () => { function
-    getColor () { const R = Math.round(Math.random() *
-    255).toString(16).padStart(2,'0') const G = Math.round(Math.random() *
-    255).toString(16).padStart(2,'0') const B = Math.round(Math.random() *
-    255).toString(16).padStart(2,'0') return `#${R}${G}${B}` }
-    document.querySelector('circle').addEventListener('click', (e) => {
-    e.target.style.fill = getColor() }); }); // ]]>
+    // <![CDATA[
+    window.addEventListener("DOMContentLoaded", () => {
+      function getColor() {
+        const R = Math.round(Math.random() * 255)
+          .toString(16)
+          .padStart(2, "0");
+
+        const G = Math.round(Math.random() * 255)
+          .toString(16)
+          .padStart(2, "0");
+
+        const B = Math.round(Math.random() * 255)
+          .toString(16)
+          .padStart(2, "0");
+
+        return `#${R}${G}${B}`;
+      }
+
+      document.querySelector("circle").addEventListener("click", (e) => {
+        e.target.style.fill = getColor();
+      });
+    });
+    // ]]>
   </script>
 
   <circle cx="5" cy="5" r="4" />

diff --git a/files/en-us/web/web_components/using_custom_elements/index.md b/files/en-us/web/web_components/using_custom_elements/index.md
@@ -106,9 +106,10 @@ const style = document.createElement("style");
 style.textContent =
   ".wrapper {" +
   // CSS truncated for brevity
+  "}";
 
-  // attach the created elements to the shadow DOM
-  this.shadowRoot.append(style, wrapper);
+// attach the created elements to the shadow DOM
+this.shadowRoot.append(style, wrapper);
 ```
 
 Finally, we register our custom element on the `CustomElementRegistry` using the `define()` method we mentioned earlier — in the parameters we specify the element name, and then the class name that defines its functionality: