From 08df46b4e907ce09bdcb87dca435936cc9f9ba2f Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Sat, 1 Oct 2022 08:36:23 +0530 Subject: [PATCH 1/3] Run Prettier on JS code fences, part 7 The PR focuses only on JS code fences. Idea is to gradually prettify all the JS code fences before the full automation. --- files/en-us/web/html/element/table/index.md | 12 ++-- .../web/html/global_attributes/is/index.md | 3 +- .../web/html/global_attributes/nonce/index.md | 8 +-- .../index.md | 2 +- files/en-us/web/http/cors/index.md | 16 ++--- .../en-us/web/manifest/share_target/index.md | 36 +++++------ files/en-us/web/media/autoplay_guide/index.md | 27 ++++---- .../web/media/formats/support_issues/index.md | 1 - .../web/media/formats/video_codecs/index.md | 4 +- files/en-us/web/privacy/index.md | 1 - .../redirect_tracking_protection/index.md | 4 +- .../add_to_home_screen/index.md | 26 ++++---- .../progressive_web_apps/installing/index.md | 1 - .../web/progressive_web_apps/loading/index.md | 8 +-- .../responsive/mobile_first/index.md | 8 +-- .../web/security/types_of_attacks/index.md | 1 - .../index.md | 2 +- files/en-us/web/svg/attribute/k1/index.md | 2 +- files/en-us/web/svg/attribute/k2/index.md | 2 +- files/en-us/web/svg/attribute/k3/index.md | 2 +- .../web/svg/attribute/pointer-events/index.md | 8 +-- .../web/svg/attribute/textlength/index.md | 16 +++-- .../web/svg/attribute/visibility/index.md | 8 ++- files/en-us/web/svg/element/script/index.md | 19 ++---- .../web/svg/namespaces_crash_course/index.md | 24 +++++--- .../using_custom_elements/index.md | 61 ++++++++++--------- .../web_components/using_shadow_dom/index.md | 42 +++++++------ .../using_templates_and_slots/index.md | 20 +++--- .../index.md | 5 +- .../advanced_example/index.md | 2 +- .../basic_example/index.md | 1 - .../javascript_xslt_bindings/index.md | 34 +++++------ 32 files changed, 212 insertions(+), 194 deletions(-) diff --git a/files/en-us/web/html/element/table/index.md b/files/en-us/web/html/element/table/index.md index 3f77d2fd7279aaf..990780486f92a20 100644 --- a/files/en-us/web/html/element/table/index.md +++ b/files/en-us/web/html/element/table/index.md @@ -304,11 +304,11 @@ HTMLTableSectionElement.prototype.sort = function (cb) { Array.from(this.rows) .sort(cb) .forEach((e) => this.appendChild(this.removeChild(e))); -} +}; -document.querySelector('table').tBodies[0].sort( - (a, b) => a.textContent.localeCompare(b.textContent), -); +document + .querySelector("table") + .tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent)); ``` ##### Result @@ -351,7 +351,7 @@ The following example adds an event handler to every `` element of every ` { + th.addEventListener("click", () => { rows.sort((tr1, tr2) => { const tr1Text = tr1.cells[cellIndex].textContent; const tr2Text = tr2.cells[cellIndex].textContent; diff --git a/files/en-us/web/html/global_attributes/is/index.md b/files/en-us/web/html/global_attributes/is/index.md index 47d0739aae027dc..e5c120c18d4ce3b 100644 --- a/files/en-us/web/html/global_attributes/is/index.md +++ b/files/en-us/web/html/global_attributes/is/index.md @@ -28,12 +28,11 @@ class WordCount extends HTMLParagraphElement { // Constructor contents omitted for brevity // … - } } // Define the new element -customElements.define('word-count', WordCount, { extends: 'p' }); +customElements.define("word-count", WordCount, { extends: "p" }); ``` ```html diff --git a/files/en-us/web/html/global_attributes/nonce/index.md b/files/en-us/web/html/global_attributes/nonce/index.md index 3939064ee592236..a49bb95b0a3a41d 100644 --- a/files/en-us/web/html/global_attributes/nonce/index.md +++ b/files/en-us/web/html/global_attributes/nonce/index.md @@ -35,8 +35,8 @@ From your web server, generate a random base64-encoded string of at least 128 bi random number generator. Nonces should be generated differently each time the page loads (nonce only once!). For example, in nodejs: ```js -const crypto = require('crypto'); -crypto.randomBytes(16).toString('base64'); +const crypto = require("crypto"); +crypto.randomBytes(16).toString("base64"); // '8IBTHwOdqNKAWeKl7plt8g==' ``` @@ -46,7 +46,7 @@ The nonce generated on your backend code should now be used for the inline scrip ```html ``` @@ -65,7 +65,7 @@ Content-Security-Policy: script-src 'nonce-8IBTHwOdqNKAWeKl7plt8g==' For security reasons, the `nonce` content attribute is hidden (an empty string will be returned). ```js example-bad -script.getAttribute('nonce'); // returns empty string +script.getAttribute("nonce"); // returns empty string ``` The [`nonce`](/en-US/docs/Web/API/HTMLElement/nonce) property is the only way to access nonces: diff --git a/files/en-us/web/http/browser_detection_using_the_user_agent/index.md b/files/en-us/web/http/browser_detection_using_the_user_agent/index.md index 53f5e7d2b14a6aa..890244811645a4a 100644 --- a/files/en-us/web/http/browser_detection_using_the_user_agent/index.md +++ b/files/en-us/web/http/browser_detection_using_the_user_agent/index.md @@ -181,7 +181,7 @@ addEventListener( () => { orientationChanged = true; }, - PASSIVE_LISTENER_OPTION, + PASSIVE_LISTENER_OPTION ); addEventListener("resize", () => diff --git a/files/en-us/web/http/cors/index.md b/files/en-us/web/http/cors/index.md index f37819aa2f3a62a..87d7cb730508ec1 100644 --- a/files/en-us/web/http/cors/index.md +++ b/files/en-us/web/http/cors/index.md @@ -97,9 +97,9 @@ For example, suppose web content at `https://foo.example` wishes to invoke conte ```js const xhr = new XMLHttpRequest(); -const url = 'https://bar.other/resources/public-data/'; +const url = "https://bar.other/resources/public-data/"; -xhr.open('GET', url); +xhr.open("GET", url); xhr.onreadystatechange = someHandler; xhr.send(); ``` @@ -160,11 +160,11 @@ The following is an example of a request that will be preflighted: ```js const xhr = new XMLHttpRequest(); -xhr.open('POST', 'https://bar.other/resources/post-here/'); -xhr.setRequestHeader('X-PINGOTHER', 'pingpong'); -xhr.setRequestHeader('Content-Type', 'text/xml'); +xhr.open("POST", "https://bar.other/resources/post-here/"); +xhr.setRequestHeader("X-PINGOTHER", "pingpong"); +xhr.setRequestHeader("Content-Type", "text/xml"); xhr.onreadystatechange = handler; -xhr.send('Arun'); +xhr.send("Arun"); ``` The example above creates an XML body to send with the `POST` request. Also, a non-standard HTTP `X-PINGOTHER` request header is set. Such headers are not part of HTTP/1.1, but are generally useful to web applications. Since the request uses a `Content-Type` of `text/xml`, and since a custom header is set, this request is preflighted. @@ -288,11 +288,11 @@ In this example, content originally loaded from `https://foo.example` makes a si ```js const invocation = new XMLHttpRequest(); -const url = 'https://bar.other/resources/credentialed-content/'; +const url = "https://bar.other/resources/credentialed-content/"; function callOtherDomain() { if (invocation) { - invocation.open('GET', url, true); + invocation.open("GET", url, true); invocation.withCredentials = true; invocation.onreadystatechange = handler; invocation.send(); diff --git a/files/en-us/web/manifest/share_target/index.md b/files/en-us/web/manifest/share_target/index.md index 577a0ac3bdb0053..700604133f05f59 100644 --- a/files/en-us/web/manifest/share_target/index.md +++ b/files/en-us/web/manifest/share_target/index.md @@ -63,7 +63,7 @@ A share target can be registered using the following `share_target` manifest mem "params": { "title": "name", "text": "description", - "url": "link", + "url": "link" } } } @@ -74,9 +74,9 @@ When a user selects your app in the system's share dialog, your PWA is launched, The [URLSearchParams](/en-US/docs/Web/API/URLSearchParams) interface can be useful to handle the shared data in your application and do something with it. ```js -const sharedName = url.searchParams.get('name'); -const sharedDescription = url.searchParams.get('description'); -const sharedLink = url.searchParams.get('link'); +const sharedName = url.searchParams.get("name"); +const sharedDescription = url.searchParams.get("description"); +const sharedLink = url.searchParams.get("link"); ``` ### Receiving share data using POST @@ -90,7 +90,7 @@ If the share request includes one or multiple files or causes a side effect in y "method": "POST", "enctype": "multipart/form-data", "params": { - "url": "link", + "url": "link" } } } @@ -99,23 +99,25 @@ If the share request includes one or multiple files or causes a side effect in y You can either handle `POST` share data using server-side code, or, to provide a better experience for offline users, a `fetch` event listener can be used to intercept the HTTP request which allows to access the data in a [service worker](/en-US/docs/Web/API/Service_Worker_API). ```js -self.addEventListener('fetch', event => { +self.addEventListener("fetch", (event) => { // Regular requests not related to Web Share Target. - if (event.request.method !== 'POST') { + if (event.request.method !== "POST") { event.respondWith(fetch(event.request)); return; } - // Requests related to Web Share Target. - event.respondWith((async () => { - const formData = await event.request.formData(); - const link = formData.get('link') || ''; - // Instead of the original URL `/save-bookmark/`, redirect - // the user to a URL returned by the `saveBookmark()` - // function, for example, `/`. - const responseUrl = await saveBookmark(link); - return Response.redirect(responseUrl, 303); - })()); + // Requests related to Web Share Target. + event.respondWith( + (async () => { + const formData = await event.request.formData(); + const link = formData.get("link") || ""; + // Instead of the original URL `/save-bookmark/`, redirect + // the user to a URL returned by the `saveBookmark()` + // function, for example, `/`. + const responseUrl = await saveBookmark(link); + return Response.redirect(responseUrl, 303); + })() + ); }); ``` diff --git a/files/en-us/web/media/autoplay_guide/index.md b/files/en-us/web/media/autoplay_guide/index.md index 8edfba829985b8b..545c356007b09c6 100644 --- a/files/en-us/web/media/autoplay_guide/index.md +++ b/files/en-us/web/media/autoplay_guide/index.md @@ -147,16 +147,18 @@ You might use code like this to accomplish the job: let startPlayPromise = videoElem.play(); if (startPlayPromise !== undefined) { - startPlayPromise.then(() => { - // Start whatever you need to do only after playback - // has begun. - }).catch((error) => { - if (error.name === "NotAllowedError") { - showPlayButton(videoElem); - } else { - // Handle a load or playback error - } - }); + startPlayPromise + .then(() => { + // Start whatever you need to do only after playback + // has begun. + }) + .catch((error) => { + if (error.name === "NotAllowedError") { + showPlayButton(videoElem); + } else { + // Handle a load or playback error + } + }); } ``` @@ -172,12 +174,13 @@ If you want to start playing the video after the first interaction with the page ```js let playAttempt = setInterval(() => { - videoElem.play() + videoElem + .play() .then(() => { clearInterval(playAttempt); }) .catch((error) => { - console.log('Unable to play the video, User has not interacted yet.'); + console.log("Unable to play the video, User has not interacted yet."); }); }, 3000); ``` diff --git a/files/en-us/web/media/formats/support_issues/index.md b/files/en-us/web/media/formats/support_issues/index.md index 9d0278672d6bec7..9566e0237f0de35 100644 --- a/files/en-us/web/media/formats/support_issues/index.md +++ b/files/en-us/web/media/formats/support_issues/index.md @@ -16,7 +16,6 @@ tags: - sound --- - One of the realities of working with audio and video presentation and manipulation on the web is that there are a number of media formats available, of varying degrees of popularity and with a variety of capabilities. The availability of choices is good for the user, in that they can choose the format that suits their needs best. There is a drawback, however: because there are so many to choose from, with so many different kinds of licenses and design principles involved, each web browser developer is left to its own devices when deciding which media file types and codecs to support. This places a small, but reasonably easily overcome, burden on the web developer: to properly handle the situation when the user's browser can't handle a particular type of media. This guide covers techniques you can use to develop web content that meets your media needs while providing the most broadly compatible experience possible. Topics we will examine fallbacks, baseline media formats, and error handling practices that will let your content work in as many situations as possible. diff --git a/files/en-us/web/media/formats/video_codecs/index.md b/files/en-us/web/media/formats/video_codecs/index.md index 48cfab121bcd0b5..0ee342cc42ed4aa 100644 --- a/files/en-us/web/media/formats/video_codecs/index.md +++ b/files/en-us/web/media/formats/video_codecs/index.md @@ -2036,11 +2036,11 @@ Given the constraints on how close to lossless you can get, you might consider u ```js const kbps = 1024; -const Mbps = kbps*kbps; +const Mbps = kbps * kbps; const options = { mimeType: 'video/webm; codecs="av01.2.19H.12.0.000.09.16.09.1, flac"', - bitsPerSecond: 800*Mbps, + bitsPerSecond: 800 * Mbps, }; let recorder = new MediaRecorder(sourceStream, options); diff --git a/files/en-us/web/privacy/index.md b/files/en-us/web/privacy/index.md index b74c0a857d3a3f1..434a78e10dde0b5 100644 --- a/files/en-us/web/privacy/index.md +++ b/files/en-us/web/privacy/index.md @@ -16,7 +16,6 @@ tags: - personal --- - As users use the web for more and more of their daily tasks, more of their private or personally-identifying information they share, ideally only with sites they trust. Cooperation among web content, the web browser, and the web server is needed to achieve as much privacy and information security as possible. In this article, we examine how to create web content that minimizes the risk of users' personal information or imagery being obtained unexpectedly by third parties. ## Security and privacy defined diff --git a/files/en-us/web/privacy/redirect_tracking_protection/index.md b/files/en-us/web/privacy/redirect_tracking_protection/index.md index 23075eb025373d4..5fe692acc747506 100644 --- a/files/en-us/web/privacy/redirect_tracking_protection/index.md +++ b/files/en-us/web/privacy/redirect_tracking_protection/index.md @@ -73,7 +73,9 @@ Different log levels can be set via the `privacy.purge_trackers.logging.level` p For debugging purposes, it's easiest to trigger storage clearing by triggering the service directly via the [Browser Console command line](https://firefox-source-docs.mozilla.org/devtools-user/browser_console/index.html#browser-console-command-line). Note that this is different from the normal [Web Console](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html) you might use to debug a website, and requires the `devtools.chrome.enabled` pref to be set to `true` to use it interactively. Once you've enabled the Browser Console you can trigger storage clearing by running the following command: ```js -await Components.classes["@mozilla.org/purge-tracker-service;1"].getService(Components.interfaces.nsIPurgeTrackerService).purgeTrackingCookieJars() +await Components.classes["@mozilla.org/purge-tracker-service;1"] + .getService(Components.interfaces.nsIPurgeTrackerService) + .purgeTrackingCookieJars(); ``` The time until user interaction permissions expire can be set to a lower amount using the `privacy.userInteraction.expiration` pref. Note that you will have to set this pref before visiting the sites you want to test — it will not apply retroactively. diff --git a/files/en-us/web/progressive_web_apps/add_to_home_screen/index.md b/files/en-us/web/progressive_web_apps/add_to_home_screen/index.md index 5c21f62c8954f65..a6b7cf322f13e67 100644 --- a/files/en-us/web/progressive_web_apps/add_to_home_screen/index.md +++ b/files/en-us/web/progressive_web_apps/add_to_home_screen/index.md @@ -156,35 +156,35 @@ At the bottom of our [`index.js` file](https://github.com/mdn/pwa-examples/blob/ ```js let deferredPrompt; -const addBtn = document.querySelector('.add-button'); -addBtn.style.display = 'none'; +const addBtn = document.querySelector(".add-button"); +addBtn.style.display = "none"; ``` We hide the button initially because the PWA will not be available for install until it follows the A2HS criteria. When this happens, supporting browsers will fire a `beforeinstallprompt` event. We can then use a handler like the one below to handle the installation: ```js -window.addEventListener('beforeinstallprompt', (e) => { +window.addEventListener("beforeinstallprompt", (e) => { // Prevent Chrome 67 and earlier from automatically showing the prompt e.preventDefault(); // Stash the event so it can be triggered later. deferredPrompt = e; // Update UI to notify the user they can add to home screen - addBtn.style.display = 'block'; + addBtn.style.display = "block"; - addBtn.addEventListener('click', (e) => { + addBtn.addEventListener("click", (e) => { // hide our user interface that shows our A2HS button - addBtn.style.display = 'none'; + addBtn.style.display = "none"; // Show the prompt deferredPrompt.prompt(); // Wait for the user to respond to the prompt deferredPrompt.userChoice.then((choiceResult) => { - if (choiceResult.outcome === 'accepted') { - console.log('User accepted the A2HS prompt'); - } else { - console.log('User dismissed the A2HS prompt'); - } - deferredPrompt = null; - }); + if (choiceResult.outcome === "accepted") { + console.log("User accepted the A2HS prompt"); + } else { + console.log("User dismissed the A2HS prompt"); + } + deferredPrompt = null; + }); }); }); ``` diff --git a/files/en-us/web/progressive_web_apps/installing/index.md b/files/en-us/web/progressive_web_apps/installing/index.md index e53db2ef8ab168c..5ed74babfc349f9 100644 --- a/files/en-us/web/progressive_web_apps/installing/index.md +++ b/files/en-us/web/progressive_web_apps/installing/index.md @@ -20,7 +20,6 @@ tags: - Web --- - Web application installation is a feature available in modern browsers that allows users to choose to easily and conveniently "install" a web application on their device so they can access it in the same way they would any other installed app. Depending on the device and features of the operating system and browser, this can result in what is essentially a fully featured application (for example, using [WebAPK](https://web.dev/webapks/) on Android) or as a shortcut added to their device's screen. This guide explains how installation is performed, what it means, and what you need to do as a developer to let your users take advantage of it. ## Why installation? diff --git a/files/en-us/web/progressive_web_apps/loading/index.md b/files/en-us/web/progressive_web_apps/loading/index.md index 59404fe7c26e169..0f69361758d4015 100644 --- a/files/en-us/web/progressive_web_apps/loading/index.md +++ b/files/en-us/web/progressive_web_apps/loading/index.md @@ -82,11 +82,11 @@ Those images will be loaded via JavaScript _after_ the site finishes building th The `app.js` file processes the `data-src` attributes like so: ```js -let imagesToLoad = document.querySelectorAll('img[data-src]'); +let imagesToLoad = document.querySelectorAll("img[data-src]"); const loadImages = (image) => { - image.setAttribute('src', image.getAttribute('data-src')); + image.setAttribute("src", image.getAttribute("data-src")); image.onload = () => { - image.removeAttribute('data-src'); + image.removeAttribute("data-src"); }; }; ``` @@ -145,7 +145,7 @@ This is a progressive enhancement to the previously working example — [Interse Here's what the relevant code looks like: ```js -if ('IntersectionObserver' in window) { +if ("IntersectionObserver" in window) { const observer = new IntersectionObserver((items, observer) => { items.forEach((item) => { if (item.isIntersecting) { 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 index 6a4568e7a6ac99e..dfe2dcf9656199c 100644 --- 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 @@ -250,8 +250,8 @@ I put Modernizr inside my `js/lib` directory, then included it by putting the fo With Modernizr in place, we can now use the following JS block to test whether media queries are supported, and if not, to load in [respond.js](https://github.com/scottjehl/Respond), Scott Jehl's `matchMedia` and media query polyfill. ```js -if (!Modernizr.mq('only all')) { - require('respond'); +if (!Modernizr.mq("only all")) { + require("respond"); } ``` @@ -259,7 +259,7 @@ if (!Modernizr.mq('only all')) { ```js if (window.matchMedia("(min-width: 481px)").matches) { - require('three'); + require("three"); } ``` @@ -270,7 +270,7 @@ 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 `` tag looks like this: ```html - + ``` 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/security/types_of_attacks/index.md b/files/en-us/web/security/types_of_attacks/index.md index dc6d4f1ef47180e..7cbbe2e6a956ee6 100644 --- a/files/en-us/web/security/types_of_attacks/index.md +++ b/files/en-us/web/security/types_of_attacks/index.md @@ -3,7 +3,6 @@ title: Types of attacks slug: Web/Security/Types_of_attacks --- - This article describes various types of security attacks and techniques to mitigate them. ## Click-jacking diff --git a/files/en-us/web/svg/applying_svg_effects_to_html_content/index.md b/files/en-us/web/svg/applying_svg_effects_to_html_content/index.md index d317ae4603b9510..67b9ac0aee45998 100644 --- a/files/en-us/web/svg/applying_svg_effects_to_html_content/index.md +++ b/files/en-us/web/svg/applying_svg_effects_to_html_content/index.md @@ -121,7 +121,7 @@ You can make changes to the SVG in real time and see them immediately affect the ```js function toggleRadius() { const circle = document.getElementById("circle"); - circle.r.baseVal.value = 0.40 - circle.r.baseVal.value; + circle.r.baseVal.value = 0.4 - circle.r.baseVal.value; } ``` diff --git a/files/en-us/web/svg/attribute/k1/index.md b/files/en-us/web/svg/attribute/k1/index.md index 09c5c4ed2263ff9..f2181613d77b4fd 100644 --- a/files/en-us/web/svg/attribute/k1/index.md +++ b/files/en-us/web/svg/attribute/k1/index.md @@ -15,7 +15,7 @@ The **`k1`** attribute defines one of the values to be used within the `arithmet The pixel composition is computed using the following formula: ```js -result = k1*i1*i2 + k2*i1 + k3*i2 + k4 +result = k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4; ``` You can use this attribute with the following SVG elements: diff --git a/files/en-us/web/svg/attribute/k2/index.md b/files/en-us/web/svg/attribute/k2/index.md index b46e580b745c964..50239d5a18dcbfe 100644 --- a/files/en-us/web/svg/attribute/k2/index.md +++ b/files/en-us/web/svg/attribute/k2/index.md @@ -15,7 +15,7 @@ The **`k2`** attribute defines one of the values to be used within the `arithmet The pixel composition is computed using the following formula: ```js -result = k1*i1*i2 + k2*i1 + k3*i2 + k4 +result = k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4; ``` You can use this attribute with the following SVG elements: diff --git a/files/en-us/web/svg/attribute/k3/index.md b/files/en-us/web/svg/attribute/k3/index.md index b56caca32a1b663..ca4b52c2efecfd6 100644 --- a/files/en-us/web/svg/attribute/k3/index.md +++ b/files/en-us/web/svg/attribute/k3/index.md @@ -15,7 +15,7 @@ The **`k3`** attribute defines one of the values to be used within the `arithmet The pixel composition is computed using the following formula: ```js -result = k1*i1*i2 + k2*i1 + k3*i2 + k4 +result = k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4; ``` You can use this attribute with the following SVG elements: diff --git a/files/en-us/web/svg/attribute/pointer-events/index.md b/files/en-us/web/svg/attribute/pointer-events/index.md index 75b26ff77e38866..a13b2d1a3539e39 100644 --- a/files/en-us/web/svg/attribute/pointer-events/index.md +++ b/files/en-us/web/svg/attribute/pointer-events/index.md @@ -70,17 +70,17 @@ svg { ``` ```js -window.addEventListener('mouseup', (e) => { +window.addEventListener("mouseup", (e) => { // Let's pick a random color between #000000 and #FFFFFF - const color = Math.round(Math.random() * 0xFFFFFF); + const color = Math.round(Math.random() * 0xffffff); // Let's format the color to fit CSS requirements - const fill = `#${color.toString(16).padStart(6, '0')}`; + const fill = `#${color.toString(16).padStart(6, "0")}`; // Let's apply our color in the // element we actually clicked on e.target.style.fill = fill; -}) +}); ``` {{EmbedLiveSample("Example", '100%', 150)}} diff --git a/files/en-us/web/svg/attribute/textlength/index.md b/files/en-us/web/svg/attribute/textlength/index.md index 9d6da4e75acc827..ff543ede9266520 100644 --- a/files/en-us/web/svg/attribute/textlength/index.md +++ b/files/en-us/web/svg/attribute/textlength/index.md @@ -144,11 +144,17 @@ const baseLength = Math.floor(textElement.textLength.baseVal.value); widthSlider.value = baseLength; -widthSlider.addEventListener("input", (event) => { - textElement.textLength.baseVal.newValueSpecifiedUnits( - SVGLength.SVG_LENGTHTYPE_PX, widthSlider.valueAsNumber); - widthDisplay.innerText = widthSlider.value; -}, false); +widthSlider.addEventListener( + "input", + (event) => { + textElement.textLength.baseVal.newValueSpecifiedUnits( + SVGLength.SVG_LENGTHTYPE_PX, + widthSlider.valueAsNumber + ); + widthDisplay.innerText = widthSlider.value; + }, + false +); widthSlider.dispatchEvent(new Event("input")); ``` diff --git a/files/en-us/web/svg/attribute/visibility/index.md b/files/en-us/web/svg/attribute/visibility/index.md index 7eb7940cab40f59..d0fb0d2c99fd121 100644 --- a/files/en-us/web/svg/attribute/visibility/index.md +++ b/files/en-us/web/svg/attribute/visibility/index.md @@ -116,8 +116,12 @@ button { ```js const button = document.querySelector("button"); button.addEventListener("click", (evt) => { - button.querySelector("svg > path:nth-of-type(1)").classList.toggle("invisible"); - button.querySelector("svg > path:nth-of-type(2)").classList.toggle("invisible"); + button + .querySelector("svg > path:nth-of-type(1)") + .classList.toggle("invisible"); + button + .querySelector("svg > path:nth-of-type(2)") + .classList.toggle("invisible"); }); ``` diff --git a/files/en-us/web/svg/element/script/index.md b/files/en-us/web/svg/element/script/index.md index 137a7ce736d83ae..45b862139a5650b 100644 --- a/files/en-us/web/svg/element/script/index.md +++ b/files/en-us/web/svg/element/script/index.md @@ -19,20 +19,13 @@ The SVG `script` element allows to add scripts to an SVG document. ```html diff --git a/files/en-us/web/svg/namespaces_crash_course/index.md b/files/en-us/web/svg/namespaces_crash_course/index.md index 797c871146eff5c..b46b99780fda86f 100644 --- a/files/en-us/web/svg/namespaces_crash_course/index.md +++ b/files/en-us/web/svg/namespaces_crash_course/index.md @@ -274,36 +274,40 @@ The [DOM Level 1](https://www.w3.org/TR/REC-DOM-Level-1/) recommendation was cre The first parameter for all the DOM2 namespace aware methods must be the namespace name (also known as the namespace URI) of the element or parameter in question. For SVG **elements** this is `http://www.w3.org/2000/svg`. However, note carefully: the [Namespaces in XML 1.1](https://www.w3.org/TR/xml-names11/#defaulting) recommendation states that the namespace name for parameters without a prefix does not have a value. In other words, although the parameters belong to the namespace of the element, you do not use the tag's namespace name. Instead, **you must use null as the namespace name for unqualified (prefixless) parameters**. So, to create an SVG `rect` _element_ using `document.createElementNS()`, you must write: ```js -document.createElementNS('http://www.w3.org/2000/svg', 'rect'); +document.createElementNS("http://www.w3.org/2000/svg", "rect"); ``` But to retrieve the value of the `x` _parameter_ on an SVG `rect` element, you must write: ```js -rect.getAttributeNS(null, 'x'); +rect.getAttributeNS(null, "x"); ``` Note that this isn't the case for parameters _with_ a namespace prefix (parameters that don't belong to the same XML dialect as the element). Parameters such as `xlink:href` require the namespace name that was assigned to that prefix (`http://www.w3.org/1999/xlink` for XLink). Hence to get the value of the `xlink:href` parameter of an `` element in SVG you would write: ```js -elt.getAttributeNS('http://www.w3.org/1999/xlink', 'href'); +elt.getAttributeNS("http://www.w3.org/1999/xlink", "href"); ``` For setting parameters that have a namespace, it is recommended (but not required) that you also include their prefix in the second parameter so that the DOM can later be more easily converted back to XML (if for instance you want to send it back to the server). For example: ```js -elt.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg'); +elt.setAttributeNS( + "http://www.w3.org/1999/xlink", + "xlink:href", + "otherdoc.svg" +); ``` As a final example, here's a demonstration of how you should dynamically create an `` element using script: ```js -const SVG_NS = 'http://www.w3.org/2000/svg'; -const XLink_NS = 'http://www.w3.org/1999/xlink'; -const image = document.createElementNS(SVG_NS, 'image'); -image.setAttributeNS(null, 'width', '100'); -image.setAttributeNS(null, 'height', '100'); -image.setAttributeNS(XLink_NS, 'xlink:href', 'flower.png'); +const SVG_NS = "http://www.w3.org/2000/svg"; +const XLink_NS = "http://www.w3.org/1999/xlink"; +const image = document.createElementNS(SVG_NS, "image"); +image.setAttributeNS(null, "width", "100"); +image.setAttributeNS(null, "height", "100"); +image.setAttributeNS(XLink_NS, "xlink:href", "flower.png"); ``` ### Conclusion 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 index b884a9ebfb1ef52..f6d534549e06d3a 100644 --- a/files/en-us/web/web_components/using_custom_elements/index.md +++ b/files/en-us/web/web_components/using_custom_elements/index.md @@ -28,7 +28,7 @@ To register a custom element on the page, you use the {{domxref("CustomElementRe So for example, we can define a custom [word-count element](https://mdn.github.io/web-components-examples/word-count-web-component/) like this: ```js -customElements.define('word-count', WordCount, { extends: 'p' }); +customElements.define("word-count", WordCount, { extends: "p" }); ``` The element is called `word-count`, its class object is `WordCount`, and it extends the {{htmlelement("p")}} element. @@ -82,36 +82,39 @@ Inside the method connectedCallback, we define all the functionality the element ```js // Create a shadow root -this.attachShadow({mode: 'open'}); // sets and returns 'this.shadowRoot' +this.attachShadow({ mode: "open" }); // sets and returns 'this.shadowRoot' // Create (nested) span elements -const wrapper = document.createElement('span'); -wrapper.setAttribute('class','wrapper'); -const icon = wrapper.appendChild(document.createElement('span')); -icon.setAttribute('class','icon'); -icon.setAttribute('tabindex', 0); +const wrapper = document.createElement("span"); +wrapper.setAttribute("class", "wrapper"); +const icon = wrapper.appendChild(document.createElement("span")); +icon.setAttribute("class", "icon"); +icon.setAttribute("tabindex", 0); // Insert icon from defined attribute or default icon -const img = icon.appendChild(document.createElement('img')); -img.src = this.hasAttribute('img') ? this.getAttribute('img') : 'img/default.png'; +const img = icon.appendChild(document.createElement("img")); +img.src = this.hasAttribute("img") + ? this.getAttribute("img") + : "img/default.png"; -const info = wrapper.appendChild(document.createElement('span')); -info.setAttribute('class','info'); +const info = wrapper.appendChild(document.createElement("span")); +info.setAttribute("class", "info"); // Take attribute content and put it inside the info span -info.textContent = this.getAttribute('data-text'); +info.textContent = this.getAttribute("data-text"); // Create some CSS to apply to the shadow DOM -const style = document.createElement('style'); -style.textContent = '.wrapper {' + -// CSS truncated for brevity +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: ```js -customElements.define('popup-info', PopUpInfo); +customElements.define("popup-info", PopUpInfo); ``` It is now available to use on our page. Over in our HTML, we use it like so: @@ -134,9 +137,9 @@ For example, take a look at this code from our [popup-info-box-external-styleshe ```js // Apply external styles to the shadow DOM -const linkElem = document.createElement('link'); -linkElem.setAttribute('rel', 'stylesheet'); -linkElem.setAttribute('href', 'style.css'); +const linkElem = document.createElement("link"); +linkElem.setAttribute("rel", "stylesheet"); +linkElem.setAttribute("href", "style.css"); // Attach the created element to the shadow DOM shadow.appendChild(linkElem); @@ -168,7 +171,7 @@ We will not explain the element functionality in any detail here, but you can di Next, we register the element using the `define()` method as before, except that this time it also includes an options object that details what element our custom element inherits from: ```js -customElements.define('expanding-list', ExpandingList, { extends: "ul" }); +customElements.define("expanding-list", ExpandingList, { extends: "ul" }); ``` Using the built-in element in a web document also looks somewhat different: @@ -204,10 +207,10 @@ Let's look at an example of these in use. The code below is taken from the [life The class constructor is really simple — here we attach a shadow DOM to the element, then attach empty {{htmlelement("div")}} and {{htmlelement("style")}} elements to the shadow root: ```js -const shadow = this.attachShadow({mode: 'open'}); +const shadow = this.attachShadow({ mode: "open" }); -const div = document.createElement('div'); -const style = document.createElement('style'); +const div = document.createElement("div"); +const style = document.createElement("style"); shadow.appendChild(style); shadow.appendChild(div); ``` @@ -217,11 +220,11 @@ The key function in this example is `updateStyle()` — this takes an element, g ```js function updateStyle(elem) { const shadow = elem.shadowRoot; - shadow.querySelector('style').textContent = ` + shadow.querySelector("style").textContent = ` div { - width: ${elem.getAttribute('l')}px; - height: ${elem.getAttribute('l')}px; - background-color: ${elem.getAttribute('c')}; + width: ${elem.getAttribute("l")}px; + height: ${elem.getAttribute("l")}px; + background-color: ${elem.getAttribute("c")}; } `; } diff --git a/files/en-us/web/web_components/using_shadow_dom/index.md b/files/en-us/web/web_components/using_shadow_dom/index.md index 41dacd050fc3243..942faeb1ff76186 100644 --- a/files/en-us/web/web_components/using_shadow_dom/index.md +++ b/files/en-us/web/web_components/using_shadow_dom/index.md @@ -62,8 +62,8 @@ Note that the shadow DOM is not a new thing by any means — browsers have used You can attach a shadow root to any element using the {{domxref("Element.attachShadow()")}} method. This takes as its parameter an options object that contains one option — `mode` — with a value of `open` or `closed`: ```js -const shadowOpen = elementRef.attachShadow({mode: 'open'}); -const shadowClosed = elementRef.attachShadow({mode: 'closed'}); +const shadowOpen = elementRef.attachShadow({ mode: "open" }); +const shadowClosed = elementRef.attachShadow({ mode: "closed" }); ``` `open` means that you can access the shadow DOM using JavaScript written in the main page context, for example using the {{domxref("Element.shadowRoot")}} property: @@ -79,13 +79,13 @@ If you attach a shadow root to a custom element with `mode: closed` set, you won If you are attaching a shadow DOM to a custom element as part of its constructor (by far the most useful application of the shadow DOM), you would use something like this: ```js -const shadow = this.attachShadow({mode: 'open'}); +const shadow = this.attachShadow({ mode: "open" }); ``` When you've attached a shadow DOM to an element, manipulating it is a matter of just using the same DOM APIs as you use for the regular DOM manipulation: ```js -const para = document.createElement('p'); +const para = document.createElement("p"); shadow.appendChild(para); // etc. ``` @@ -113,7 +113,7 @@ We first attach a shadow root to the custom element: ```js // Create a shadow root -const shadow = this.attachShadow({mode: 'open'}); +const shadow = this.attachShadow({ mode: "open" }); ``` ### Creating the shadow DOM structure @@ -122,21 +122,23 @@ Next, we use some DOM manipulation to create the element's internal shadow DOM s ```js // Create spans -const wrapper = document.createElement('span'); -wrapper.setAttribute('class', 'wrapper'); -const icon = document.createElement('span'); -icon.setAttribute('class', 'icon'); -icon.setAttribute('tabindex', 0); -const info = document.createElement('span'); -info.setAttribute('class', 'info'); +const wrapper = document.createElement("span"); +wrapper.setAttribute("class", "wrapper"); +const icon = document.createElement("span"); +icon.setAttribute("class", "icon"); +icon.setAttribute("tabindex", 0); +const info = document.createElement("span"); +info.setAttribute("class", "info"); // Take attribute content and put it inside the info span -const text = this.getAttribute('data-text'); +const text = this.getAttribute("data-text"); info.textContent = text; // Insert icon -const img = document.createElement('img'); -img.src = this.hasAttribute('img') ? this.getAttribute('img') : 'img/default.png'; +const img = document.createElement("img"); +img.src = this.hasAttribute("img") + ? this.getAttribute("img") + : "img/default.png"; icon.appendChild(img); ``` @@ -146,7 +148,7 @@ After that we create a {{htmlelement("style")}} element and populate it with som ```js // Create some CSS to apply to the shadow DOM -let style = document.createElement('style'); +let style = document.createElement("style"); style.textContent = ` .wrapper { @@ -196,7 +198,7 @@ Once the class is defined, using the element is as simple as defining it, and pu ```js // Define the new element -customElements.define('popup-info', PopUpInfo); +customElements.define("popup-info", PopUpInfo); ``` ```html @@ -213,9 +215,9 @@ For example, take a look at this code from our [popup-info-box-external-styleshe ```js // Apply external styles to the shadow DOM -const linkElem = document.createElement('link'); -linkElem.setAttribute('rel', 'stylesheet'); -linkElem.setAttribute('href', 'style.css'); +const linkElem = document.createElement("link"); +linkElem.setAttribute("rel", "stylesheet"); +linkElem.setAttribute("href", "style.css"); // Attach the created element to the shadow DOM shadow.appendChild(linkElem); diff --git a/files/en-us/web/web_components/using_templates_and_slots/index.md b/files/en-us/web/web_components/using_templates_and_slots/index.md index e6b0c9c504bb94f..86991bf015c28cc 100644 --- a/files/en-us/web/web_components/using_templates_and_slots/index.md +++ b/files/en-us/web/web_components/using_templates_and_slots/index.md @@ -30,7 +30,7 @@ Let's look at a trivial quick example: This won't appear in your page until you grab a reference to it with JavaScript and then append it to the DOM, using something like the following: ```js -let template = document.getElementById('my-paragraph'); +let template = document.getElementById("my-paragraph"); let templateContent = template.content; document.body.appendChild(templateContent); ``` @@ -44,14 +44,15 @@ Let's define a web component that uses our template as the content of its shadow We'll call it `` as well: ```js -customElements.define('my-paragraph', +customElements.define( + "my-paragraph", class extends HTMLElement { constructor() { super(); - let template = document.getElementById('my-paragraph'); + let template = document.getElementById("my-paragraph"); let templateContent = template.content; - const shadowRoot = this.attachShadow({mode: 'open'}); + const shadowRoot = this.attachShadow({ mode: "open" }); shadowRoot.appendChild(templateContent.cloneNode(true)); } } @@ -215,14 +216,15 @@ Next, let's create a new custom element named **``** and use {{ This uses exactly the same pattern as we saw in our earlier trivial example. ```js -customElements.define('element-details', +customElements.define( + "element-details", class extends HTMLElement { constructor() { super(); - const template = document - .getElementById('element-details-template') - .content; - const shadowRoot = this.attachShadow({mode: 'open'}); + const template = document.getElementById( + "element-details-template" + ).content; + const shadowRoot = this.attachShadow({ mode: "open" }); shadowRoot.appendChild(template.cloneNode(true)); } } diff --git a/files/en-us/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.md b/files/en-us/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.md index 0cac29b05997f56..dfbc33ae5e4bd13 100644 --- a/files/en-us/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.md +++ b/files/en-us/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.md @@ -62,7 +62,10 @@ You can also use {{domxref("XSLTProcessor.transformToFragment()")}} which will r ```js const ownerDocument = document.implementation.createDocument("", "test", null); -const newFragment = processor.transformToFragment(domToBeTransformed, ownerDocument); +const newFragment = processor.transformToFragment( + domToBeTransformed, + ownerDocument +); ``` {{domxref("XSLTProcessor.transformToFragment()")}} will only produce HTML DOM objects if the owner document is itself an {{domxref("HTMLDocument")}}, or if the output method of the stylesheet is HTML. It will **not** produce an HTML DOM objects if only the toplevel element of the result is {{HTMLElement("html")}} as {{domxref("XSLTProcessor.transformToFragment()")}} is rarely used to create this element. If you want to override this, you can set the output method normally in the standard way. diff --git a/files/en-us/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.md b/files/en-us/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.md index 72590be6971f813..42e0fff156c0ccf 100644 --- a/files/en-us/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.md +++ b/files/en-us/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.md @@ -82,7 +82,7 @@ function sort() { myDOM = fragment; // Add the new content from the transformation - document.getElementById("example").appendChild(fragment) + document.getElementById("example").appendChild(fragment); } ``` diff --git a/files/en-us/web/xslt/xslt_js_interface_in_gecko/basic_example/index.md b/files/en-us/web/xslt/xslt_js_interface_in_gecko/basic_example/index.md index 32bbaab3f1ae53a..e4076228390aef3 100644 --- a/files/en-us/web/xslt/xslt_js_interface_in_gecko/basic_example/index.md +++ b/files/en-us/web/xslt/xslt_js_interface_in_gecko/basic_example/index.md @@ -105,7 +105,6 @@ let myDOM; let xmlDoc; function Init() { - // Load the xslt file, example1.xsl let myXMLHTTPRequest = new XMLHttpRequest(); myXMLHTTPRequest.open("GET", "example1.xsl", false); diff --git a/files/en-us/web/xslt/xslt_js_interface_in_gecko/javascript_xslt_bindings/index.md b/files/en-us/web/xslt/xslt_js_interface_in_gecko/javascript_xslt_bindings/index.md index 797a87021a31f4d..480580a1ef60e65 100644 --- a/files/en-us/web/xslt/xslt_js_interface_in_gecko/javascript_xslt_bindings/index.md +++ b/files/en-us/web/xslt/xslt_js_interface_in_gecko/javascript_xslt_bindings/index.md @@ -15,17 +15,17 @@ JavaScript can run XSLT transformations through the {{domxref('XSLTProcessor')}} ### Instantiating an {{domxref('XSLTProcessor')}} ```js - const xsltProcessor = new XSLTProcessor(); +const xsltProcessor = new XSLTProcessor(); - // Load the xsl file using synchronous (third param is set to false) XMLHttpRequest - const myXMLHTTPRequest = new XMLHttpRequest(); - myXMLHTTPRequest.open("GET", "example.xsl", false); - myXMLHTTPRequest.send(null); +// Load the xsl file using synchronous (third param is set to false) XMLHttpRequest +const myXMLHTTPRequest = new XMLHttpRequest(); +myXMLHTTPRequest.open("GET", "example.xsl", false); +myXMLHTTPRequest.send(null); - const xslRef = myXMLHTTPRequest.responseXML; +const xslRef = myXMLHTTPRequest.responseXML; - // Finally import the .xsl - xsltProcessor.importStylesheet(xslRef); +// Finally import the .xsl +xsltProcessor.importStylesheet(xslRef); ``` For the actual transformation, {{domxref('XSLTProcessor')}} requires an XML document, which is used in conjunction with the imported XSL file to produce the final result. The XML document can be a separate XML file loaded as shown in figure 1, or it can be part of the existing page. To process part of a page's DOM, it is necessary to first create an XML document in memory. Assuming that the DOM to be processed is contained by an element with the id `example`, that DOM can be "cloned" using the in-memory XML document's {{domxref('Document.importNode()')}} method. {{domxref('Document.importNode()')}} allows transferring a DOM fragment between documents, in this case from an HTML document to an XML document. The first parameter references the DOM node to clone. By making the second parameter "true", it will clone all descendants as well (a deep clone). The cloned DOM can then be easily inserted into the XML document using {{domxref('Node.appendChild()')}}, as shown in figure 2. @@ -33,16 +33,16 @@ For the actual transformation, {{domxref('XSLTProcessor')}} requires an XML docu ### Creating an XML document based on part of a document's DOM ```js - // Create a new XML document in memory - const xmlRef = document.implementation.createDocument("", "", null); +// Create a new XML document in memory +const xmlRef = document.implementation.createDocument("", "", null); - // We want to move a part of the DOM from an HTML document to an XML document. - // importNode is used to clone the nodes we want to process via XSLT - true makes it do a deep clone - const myNode = document.getElementById("example"); - const clonedNode = xmlRef.importNode(myNode, true); +// We want to move a part of the DOM from an HTML document to an XML document. +// importNode is used to clone the nodes we want to process via XSLT - true makes it do a deep clone +const myNode = document.getElementById("example"); +const clonedNode = xmlRef.importNode(myNode, true); - // Add the cloned DOM into the XML document - xmlRef.appendChild(clonedNode); +// Add the cloned DOM into the XML document +xmlRef.appendChild(clonedNode); ``` Once the stylesheet has been imported, {{domxref('XSLTProcessor')}} has to perform two methods for the actual transformation, namely {{domxref('XSLTProcessor.transformToDocument()')}} and {{domxref('XSLTProcessor.transformToFragment()')}}. {{domxref('XSLTProcessor.transformToDocument()')}} returns a full XML document while {{domxref('XSLTProcessor.transformToFragment()')}} returns a document fragment that can be easily added to an existing document. Both take in the XML document as the first parameter that will be transformed. {{domxref('XSLTProcessor.transformToFragment()')}} requires a second parameter, namely the document object that will own the generated fragment. If the generated fragment will be inserted into the current HTML document, passing in document is enough. @@ -59,5 +59,5 @@ const doc = parser.parseFromString(aStr, "text/xml"); ### Performing the transformation ```js - const fragment = xsltProcessor.transformToFragment(xmlRef, document); +const fragment = xsltProcessor.transformToFragment(xmlRef, document); ``` From 20f8420483d008322da448d999479e2e7016e720 Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Sat, 1 Oct 2022 09:45:09 +0530 Subject: [PATCH 2/3] Apply review suggestions --- .../responsive/mobile_first/index.md | 4 +-- files/en-us/web/svg/element/script/index.md | 35 ++++++++++++++----- .../using_custom_elements/index.md | 5 +-- 3 files changed, 31 insertions(+), 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 index dfe2dcf9656199c..73427bf2b1c31d3 100644 --- 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 `` tag looks like this: -```html - +```html-nolint + ``` 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 index 45b862139a5650b..aee02caad139685 100644 --- 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 - +```html-nolint +Click the circle to change colors. + 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 index f6d534549e06d3a..bbdc2901e3cca30 100644 --- 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: From 0843fd33664bcff685e14ef5648561de9e0cafad Mon Sep 17 00:00:00 2001 From: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Sat, 1 Oct 2022 12:00:04 +0530 Subject: [PATCH 3/3] Update files/en-us/web/web_components/using_custom_elements/index.md Co-authored-by: Joshua Chen --- .../web/web_components/using_custom_elements/index.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) 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 index bbdc2901e3cca30..3f388bd2e4dcdaa 100644 --- a/files/en-us/web/web_components/using_custom_elements/index.md +++ b/files/en-us/web/web_components/using_custom_elements/index.md @@ -103,10 +103,9 @@ info.textContent = this.getAttribute("data-text"); // Create some CSS to apply to the shadow DOM const style = document.createElement("style"); -style.textContent = - ".wrapper {" + - // CSS truncated for brevity - "}"; +style.textContent = `.wrapper { + /* CSS truncated for brevity */ +}`; // attach the created elements to the shadow DOM this.shadowRoot.append(style, wrapper);