switch from shadowroot= to shadowrootmode=

Author: keithamus

STYLEGUIDE.md

@@ -241,8 +241,8 @@ concepts, for example always use Declarative Shadow DOM. As a general rule, if y
 your prose, then don't use it.
 
 Concepts are useful for capturing a group of APIs, or a technique. For example a Declarative ShadowDOM refers to a
-`template` with a `shadowroot=` _attribute_ inside of HTML. A concept needs to be set up before its use on a page, but
-once it has been explained, you can continue to refer to it without having to recover the APIs it's comprised of.
+`template` with a `shadowrootmode=` _attribute_ inside of HTML. A concept needs to be set up before its use on a page,
+but once it has been explained, you can continue to refer to it without having to recover the APIs it's comprised of.
 
 ## Ending notes, summaries
 

learn/components/rendering.md

@@ -82,11 +82,11 @@ class StopWatchElement extends HTMLElement {
 If you don't want to define the template within JavaScript, you can instead define it up-front in the HTML of your
 component with a _declarative ShadowDOM template_. When you define a _declarative ShadowDOM template_ the browser will
 handle attaching a _shadow root_ and cloning the contents of the template for you. To do this, you'll need to add a
-`<template>` tag as a child of your element, with a `shadowroot` attribute:
+`<template>` tag as a child of your element, with a `shadowrootmode` attribute:
 
 ```html
 <stop-watch>
-  <template shadowroot="open">
+  <template shadowrootmode="open">
     <p>Hello World</p>
   </template>
 </stop-watch>
@@ -143,10 +143,10 @@ class StopWatchElement extends HTMLElement {
 ### Advanced: Using a closed _ShadowDOM_
 
 You might have noticed that `attachShadow()` has to be passed `mode: 'open'` (and similarly _declarative ShadowDOM_ is
-created using `<template shadowroot="open">`). This tells the ShadowRoot to be in "open" mode, which makes it public.
-Other elements will be able to access an open ShadowRoot via the `.shadowRoot` property - even if you don't set it
-yourself. Generally speaking, open ShadowRoots are the best choice; they still offer good isolation and are easy to work
-with.
+created using `<template shadowrootmode="open">`). This tells the ShadowRoot to be in "open" mode, which makes it
+_public_. Other elements will be able to access an open ShadowRoot via the `.shadowRoot` property - even if you don't
+set it yourself. Generally speaking, open ShadowRoots are the best choice; they still offer good isolation and are easy
+to work with.
 
 Another option, however, is to set it to `mode: 'closed'`. This makes your ShadowRoot private. A _closed ShadowRoot_
 **will not** be accessible via `.shadowRoot` (unless you intentionally assign it to `.shadowRoot`). It will also change
@@ -190,7 +190,7 @@ one can also get the _closed ShadowRoot_:
 
 ```html
 <stop-watch>
-  <template shadowroot="closed">
+  <template shadowrootmode="closed">
     <p>Hello World</p>
   </template>
 </stop-watch>

learn/components/styling.md

@@ -21,7 +21,7 @@ boundary unintentionally. This is different to regular CSS where a selector can
 <p>This text is deeppink and not teal because it is outside of the shadow root.</p>
 
 <fancy-p>
-  <template shadowroot="open">
+  <template shadowrootmode="open">
     <style>
       p {
         color: teal;
@@ -52,7 +52,7 @@ element itself (also known as the shadow host).
 <article>
   <h1>This text is deeppink.</h1>
   <article-meta>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
       <style>
         span {
           font-style: italic;
@@ -80,7 +80,7 @@ styles to the custom element, aka the _shadow host_:
 
 ```html
 <fancy-p>
-  <template shadowroot="open">
+  <template shadowrootmode="open">
     <style>
       :host {
         display: inline-block;
@@ -113,7 +113,7 @@ it will select elements within the shadow tree.
 
 ```html
 <fancy-p>
-  <template shadowroot="open">
+  <template shadowrootmode="open">
     <style>
       :host > p {
         color: deeppink;
@@ -132,7 +132,7 @@ selector. Specifying a selector can be useful for styling specific elements in p
 
 ```html
 <fancy-elements>
-  <template shadowroot="open">
+  <template shadowrootmode="open">
     <style>
       ::slotted(button) {
         color: deeppink;
@@ -153,7 +153,7 @@ If you want to target elements in specific slots you can pass an attribute selec
 
 ```html
 <fancy-article>
-  <template shadowroot="open">
+  <template shadowrootmode="open">
     <style>
       ::slotted([slot="title"]) {
         font-size: 2rem;
@@ -210,7 +210,7 @@ fancy-article::part(content) {
 
 ```html
 <fancy-article>
-  <template shadowroot="open">
+  <template shadowrootmode="open">
     <article part="article">
       <hgroup part="header">
         <slot name="title"></slot>

script/polyfills.js

@@ -5,8 +5,8 @@ import "construct-style-sheets-polyfill"
 
 /* Declarative ShadowDOM polyfill */
 function attachShadowRoots(root) {
-  root.querySelectorAll("template[shadowroot]").forEach((template) => {
-    const mode = template.getAttribute("shadowroot")
+  root.querySelectorAll("template[shadowrootmode]").forEach((template) => {
+    const mode = template.getAttribute("shadowrootmode")
     const shadowRoot = template.parentNode.attachShadow({ mode })
     shadowRoot.appendChild(template.content)
     template.remove()