fix: Better element ID naming for disambiguation (fixes mdn/web-compo…

…nents-examples#74) (#33666)

* disambiguate a name in simple-template example (in sync with web-components-examples repo)

* Fix review (ft. @bsmth)

---------

Co-authored-by: Brian Thomas Smith <[email protected]>

files/en-us/web/api/customelementregistry/get/index.md

@@ -34,7 +34,7 @@ customElements.define(
   "my-paragraph",
   class extends HTMLElement {
     constructor() {
-      let templateContent = document.getElementById("my-paragraph").content;
+      let templateContent = document.getElementById("custom-paragraph").content;
       super() // returns element this scope
         .attachShadow({ mode: "open" }) // sets AND returns this.shadowRoot
         .append(templateContent.cloneNode(true));

files/en-us/web/api/customelementregistry/getname/index.md

@@ -32,7 +32,7 @@ The name for the previously defined custom element, or `null` if there is no cus
 ```js
 class MyParagraph extends HTMLElement {
   constructor() {
-    let templateContent = document.getElementById("my-paragraph").content;
+    let templateContent = document.getElementById("custom-paragraph").content;
     super() // returns element this scope
       .attachShadow({ mode: "open" }) // sets AND returns this.shadowRoot
       .append(templateContent.cloneNode(true));

files/en-us/web/api/web_components/using_templates_and_slots/index.md

@@ -17,15 +17,15 @@ This element and its contents are not rendered in the DOM, but it can still be r
 Let's look at a trivial quick example:
 
 ```html
-<template id="my-paragraph">
+<template id="custom-paragraph">
   <p>My paragraph</p>
 </template>
 ```
 
 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("custom-paragraph");
 let templateContent = template.content;
 document.body.appendChild(templateContent);
 ```
@@ -44,7 +44,7 @@ customElements.define(
   class extends HTMLElement {
     constructor() {
       super();
-      let template = document.getElementById("my-paragraph");
+      let template = document.getElementById("custom-paragraph");
       let templateContent = template.content;
 
       const shadowRoot = this.attachShadow({ mode: "open" });
@@ -62,7 +62,7 @@ This wouldn't work if we just appended it to the standard DOM.
 So for example:
 
 ```html
-<template id="my-paragraph">
+<template id="custom-paragraph">
   <style>
     p {
       color: white;