diff --git a/README.md b/README.md
index d6c54c6..de8cfc7 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,7 @@
 1. Get HTML!
     ```html
     <wcc-footer>
-      <template shadowroot="open">
+      <template shadowrootmode="open">
         <style>
           .footer {
             color: white;
diff --git a/docs/pages/docs.md b/docs/pages/docs.md
index 4e8c64d..d040f2a 100644
--- a/docs/pages/docs.md
+++ b/docs/pages/docs.md
@@ -199,7 +199,7 @@ class Counter extends HTMLElement {
 
   render() {
     return `
-      <template shadowroot="open">
+      <template shadowrootmode="open">
         <script type="application/json">
           ${JSON.stringify({ count: this.count })}
         </script>
diff --git a/docs/pages/index.md b/docs/pages/index.md
index 62bbe04..37350ed 100644
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -70,7 +70,7 @@ $ npm install wc-compiler --save-dev
 1. You will get the following HTML output that can be used in conjunction with your preferred site framework or templating solution.
     ```html
     <wcc-footer>
-      <template shadowroot="open">
+      <template shadowrootmode="open">
         <style>
           .footer {
             color: white;
diff --git a/src/dom-shim.js b/src/dom-shim.js
index 78ed71c..389b996 100644
--- a/src/dom-shim.js
+++ b/src/dom-shim.js
@@ -108,7 +108,7 @@ class HTMLTemplateElement extends HTMLElement {
   set innerHTML(html) {
     if (this.content) {
       this.content.innerHTML = `
-        <template shadowroot="open">
+        <template shadowrootmode="open">
           ${html}
         </template>
       `;
diff --git a/test/cases/attributes/attributes.spec.js b/test/cases/attributes/attributes.spec.js
index f35c070..cd73ba9 100644
--- a/test/cases/attributes/attributes.spec.js
+++ b/test/cases/attributes/attributes.spec.js
@@ -30,7 +30,7 @@ describe('Run WCC For ', function() {
 
   describe(LABEL, function() {
     it('should have one top level <wcc-counter> custom element with a <template> with an open shadowroot', function() {
-      expect(dom.window.document.querySelectorAll('wcc-counter template[shadowroot="open"]').length).to.equal(1);
+      expect(dom.window.document.querySelectorAll('wcc-counter template[shadowrootmode="open"]').length).to.equal(1);
       expect(dom.window.document.querySelectorAll('wcc-counter  template').length).to.equal(1);
     });
 
@@ -44,7 +44,7 @@ describe('Run WCC For ', function() {
       let counterContentsDom;
 
       before(function() {
-        counterContentsDom = new JSDOM(dom.window.document.querySelectorAll('wcc-counter template[shadowroot="open"]')[0].innerHTML);
+        counterContentsDom = new JSDOM(dom.window.document.querySelectorAll('wcc-counter template[shadowrootmode="open"]')[0].innerHTML);
       });
 
       it('should have two <button> tags within the <wcc-counter> shadowroot', function() {
diff --git a/test/cases/attributes/src/components/counter.js b/test/cases/attributes/src/components/counter.js
index cf113ee..2ac142c 100644
--- a/test/cases/attributes/src/components/counter.js
+++ b/test/cases/attributes/src/components/counter.js
@@ -51,7 +51,7 @@ class Counter extends HTMLElement {
 
   render() {
     return `
-      <template shadowroot="open">
+      <template shadowrootmode="open">
         <div>
           <button id="inc">Increment</button>
           <span>Current Count: <span id="count">${this.count}</span></span>
diff --git a/test/cases/children-and-slots/children-and-slots.spec.js b/test/cases/children-and-slots/children-and-slots.spec.js
index a3dcd97..4ca7bb4 100644
--- a/test/cases/children-and-slots/children-and-slots.spec.js
+++ b/test/cases/children-and-slots/children-and-slots.spec.js
@@ -31,7 +31,7 @@ describe('Run WCC For ', function() {
 
   describe(LABEL, function() {
     it('should have one two top level <wcc-paragraph> custom elements with a <template> with an open shadowroot', function() {
-      expect(dom.window.document.querySelectorAll('wcc-paragraph template[shadowroot="open"]').length).to.equal(2);
+      expect(dom.window.document.querySelectorAll('wcc-paragraph template[shadowrootmode="open"]').length).to.equal(2);
       expect(dom.window.document.querySelectorAll('wcc-paragraph template').length).to.equal(2);
     });
 
@@ -39,7 +39,7 @@ describe('Run WCC For ', function() {
       let paragraphContentsDom;
 
       before(function() {
-        paragraphContentsDom = new JSDOM(dom.window.document.querySelectorAll('wcc-paragraph.default template[shadowroot="open"]')[0].innerHTML);
+        paragraphContentsDom = new JSDOM(dom.window.document.querySelectorAll('wcc-paragraph.default template[shadowrootmode="open"]')[0].innerHTML);
       });
 
       it('should have one <my-paragraph> tag for the default content', function() {
@@ -56,7 +56,7 @@ describe('Run WCC For ', function() {
       let paragraphContentsLightDom;
 
       before(function() {
-        paragraphContentsDom = new JSDOM(dom.window.document.querySelectorAll('wcc-paragraph.custom template[shadowroot="open"]')[0].innerHTML);
+        paragraphContentsDom = new JSDOM(dom.window.document.querySelectorAll('wcc-paragraph.custom template[shadowrootmode="open"]')[0].innerHTML);
         paragraphContentsLightDom = new JSDOM(dom.window.document.querySelectorAll('wcc-paragraph.custom')[0].innerHTML);
       });
 
diff --git a/test/cases/custom-extension/custom-extension.spec.js b/test/cases/custom-extension/custom-extension.spec.js
index 0d6b954..6feb03b 100644
--- a/test/cases/custom-extension/custom-extension.spec.js
+++ b/test/cases/custom-extension/custom-extension.spec.js
@@ -46,7 +46,7 @@ describe('Run WCC For ', function() {
     });
 
     it('should have one top level <wcc-footer> element with a <template> with an open shadowroot', function() {
-      expect(dom.window.document.querySelectorAll('wcc-footer template[shadowroot="open"]').length).to.equal(1);
+      expect(dom.window.document.querySelectorAll('wcc-footer template[shadowrootmode="open"]').length).to.equal(1);
       expect(dom.window.document.querySelectorAll('template').length).to.equal(1);
     });
 
@@ -54,7 +54,7 @@ describe('Run WCC For ', function() {
       let footer;
 
       before(async function() {
-        footer = new JSDOM(dom.window.document.querySelectorAll('wcc-footer template[shadowroot="open"]')[0].innerHTML);
+        footer = new JSDOM(dom.window.document.querySelectorAll('wcc-footer template[shadowrootmode="open"]')[0].innerHTML);
       });
 
       it('should have one <footer> tag within the <template> shadowroot', function() {
diff --git a/test/cases/get-data/get-data.spec.js b/test/cases/get-data/get-data.spec.js
index 551f916..bc814fb 100644
--- a/test/cases/get-data/get-data.spec.js
+++ b/test/cases/get-data/get-data.spec.js
@@ -30,7 +30,7 @@ describe('Run WCC For ', function() {
 
   describe(LABEL, function() {
     it('should have one top level <wcc-counter> custom element with a <template> with an open shadowroot', function() {
-      expect(dom.window.document.querySelectorAll('wcc-counter template[shadowroot="open"]').length).to.equal(1);
+      expect(dom.window.document.querySelectorAll('wcc-counter template[shadowrootmode="open"]').length).to.equal(1);
       expect(dom.window.document.querySelectorAll('wcc-counter template').length).to.equal(1);
     });
 
@@ -45,7 +45,7 @@ describe('Run WCC For ', function() {
       let count;
 
       before(function() {
-        counterContentsDom = new JSDOM(dom.window.document.querySelectorAll('wcc-counter template[shadowroot="open"]')[0].innerHTML);
+        counterContentsDom = new JSDOM(dom.window.document.querySelectorAll('wcc-counter template[shadowrootmode="open"]')[0].innerHTML);
         count = JSON.parse(counterContentsDom.window.document.querySelector('script[type="application/json"]').textContent).count;
       });
 
diff --git a/test/cases/get-data/src/components/counter.js b/test/cases/get-data/src/components/counter.js
index af70c90..3aa23b1 100644
--- a/test/cases/get-data/src/components/counter.js
+++ b/test/cases/get-data/src/components/counter.js
@@ -52,7 +52,7 @@ class Counter extends HTMLElement {
 
   render() {
     return `
-      <template shadowroot="open">
+      <template shadowrootmode="open">
         <script type="application/json">
           ${JSON.stringify({ count: this.count })}
         </script>
diff --git a/test/cases/nested-elements/nested-elements.spec.js b/test/cases/nested-elements/nested-elements.spec.js
index 4c274a2..6a4b7c8 100644
--- a/test/cases/nested-elements/nested-elements.spec.js
+++ b/test/cases/nested-elements/nested-elements.spec.js
@@ -31,12 +31,12 @@ describe('Run WCC For ', function() {
     const { html } = await renderToString(new URL('./src/pages/index.js', import.meta.url));
 
     dom = new JSDOM(html);
-    pageContentsDom = new JSDOM(dom.window.document.querySelectorAll('wcc-home template[shadowroot="open"]')[0].innerHTML);
+    pageContentsDom = new JSDOM(dom.window.document.querySelectorAll('wcc-home template[shadowrootmode="open"]')[0].innerHTML);
   });
 
   describe(LABEL, function() {
     it('should have one top level <template> with an open shadowroot', function() {
-      expect(dom.window.document.querySelectorAll('template[shadowroot="open"]').length).to.equal(1);
+      expect(dom.window.document.querySelectorAll('template[shadowrootmode="open"]').length).to.equal(1);
       expect(dom.window.document.querySelectorAll('template').length).to.equal(1);
     });
 
@@ -44,7 +44,7 @@ describe('Run WCC For ', function() {
       let footerContentsDom;
 
       before(function() {
-        footerContentsDom = new JSDOM(pageContentsDom.window.document.querySelectorAll('wcc-footer template[shadowroot="open"]')[0].innerHTML);
+        footerContentsDom = new JSDOM(pageContentsDom.window.document.querySelectorAll('wcc-footer template[shadowrootmode="open"]')[0].innerHTML);
       });
 
       it('should have a <footer> tag within the <template> shadowroot', function() {
@@ -68,7 +68,7 @@ describe('Run WCC For ', function() {
       let headerContentsDom;
 
       before(function() {
-        headerContentsDom = new JSDOM(pageContentsDom.window.document.querySelectorAll('wcc-header template[shadowroot="open"]')[0].innerHTML);
+        headerContentsDom = new JSDOM(pageContentsDom.window.document.querySelectorAll('wcc-header template[shadowrootmode="open"]')[0].innerHTML);
       });
 
       it('should have a <header> tag within the <template> shadowroot', function() {
@@ -85,7 +85,7 @@ describe('Run WCC For ', function() {
         let navigationContentsDom;
 
         before(function() {
-          navigationContentsDom = new JSDOM(headerContentsDom.window.document.querySelectorAll('wcc-navigation template[shadowroot="open"]')[0].innerHTML);
+          navigationContentsDom = new JSDOM(headerContentsDom.window.document.querySelectorAll('wcc-navigation template[shadowrootmode="open"]')[0].innerHTML);
         });
 
         it('should have a <nav> tag within the <template> shadowroot', function() {
diff --git a/test/cases/nested-elements/src/components/header.js b/test/cases/nested-elements/src/components/header.js
index 757cafc..92f0fe2 100644
--- a/test/cases/nested-elements/src/components/header.js
+++ b/test/cases/nested-elements/src/components/header.js
@@ -11,7 +11,7 @@ class Header extends HTMLElement {
 
   render() {
     return `
-      <template shadowroot="open">
+      <template shadowrootmode="open">
         <header class="header">
           <div class="head-wrap">
             <div class="brand">
diff --git a/test/cases/render-from-html/render-from-html.spec.js b/test/cases/render-from-html/render-from-html.spec.js
index 9027c4d..dd8c89e 100644
--- a/test/cases/render-from-html/render-from-html.spec.js
+++ b/test/cases/render-from-html/render-from-html.spec.js
@@ -71,7 +71,7 @@ describe('Run WCC ', function() {
       let headerContentsDom;
 
       before(function() {
-        headerContentsDom = new JSDOM(dom.window.document.querySelectorAll('wcc-header template[shadowroot="open"]')[0].innerHTML);
+        headerContentsDom = new JSDOM(dom.window.document.querySelectorAll('wcc-header template[shadowrootmode="open"]')[0].innerHTML);
       });
 
       it('should have a <header> tag within the <template> shadowroot', function() {
@@ -88,7 +88,7 @@ describe('Run WCC ', function() {
         let navigationContentsDom;
 
         before(function() {
-          navigationContentsDom = new JSDOM(headerContentsDom.window.document.querySelectorAll('wcc-navigation template[shadowroot="open"]')[0].innerHTML);
+          navigationContentsDom = new JSDOM(headerContentsDom.window.document.querySelectorAll('wcc-navigation template[shadowrootmode="open"]')[0].innerHTML);
         });
 
         it('should have a <nav> tag within the <template> shadowroot', function() {
diff --git a/test/cases/single-element/single-element.spec.js b/test/cases/single-element/single-element.spec.js
index 9fff355..b033337 100644
--- a/test/cases/single-element/single-element.spec.js
+++ b/test/cases/single-element/single-element.spec.js
@@ -43,7 +43,7 @@ describe('Run WCC For ', function() {
     });
 
     it('should have one top level <wcc-footer> element with a <template> with an open shadowroot', function() {
-      expect(dom.window.document.querySelectorAll('wcc-footer template[shadowroot="open"]').length).to.equal(1);
+      expect(dom.window.document.querySelectorAll('wcc-footer template[shadowrootmode="open"]').length).to.equal(1);
       expect(dom.window.document.querySelectorAll('template').length).to.equal(1);
     });
 
@@ -51,7 +51,7 @@ describe('Run WCC For ', function() {
       let footer;
 
       before(async function() {
-        footer = new JSDOM(dom.window.document.querySelectorAll('wcc-footer template[shadowroot="open"]')[0].innerHTML);
+        footer = new JSDOM(dom.window.document.querySelectorAll('wcc-footer template[shadowrootmode="open"]')[0].innerHTML);
       });
 
       it('should have one <footer> tag within the <template> shadowroot', function() {