feature/issue 126 migrate to shadowrootmode attribute

README.md

@@ -50,7 +50,7 @@
 1. Get HTML!
     ```html
     <wcc-footer>
-      <template shadowroot="open">
+      <template shadowrootmode="open">
         <style>
           .footer {
             color: white;

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>

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;

src/dom-shim.js

@@ -9,7 +9,7 @@
 
 // https://developer.mozilla.org/en-US/docs/Web/API/Node
 // EventTarget <- Node
 // TODO should be an interface?
 class Node extends EventTarget {
   // eslint-disable-next-line
   cloneNode(deep) {
@@ -104,11 +104,11 @@
     this.content = new DocumentFragment();
   }
 
   // TODO open vs closed shadow root
   set innerHTML(html) {
     if (this.content) {
       this.content.innerHTML = `
-        <template shadowroot="open">
+        <template shadowrootmode="open">
           ${html}
         </template>
       `;

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() {

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>

test/cases/children-and-slots/children-and-slots.spec.js

@@ -31,15 +31,15 @@ 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);
     });
 
     describe('<my-paragraph> with default <slot> content', 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);
       });
 

test/cases/custom-extension/custom-extension.spec.js

@@ -46,15 +46,15 @@ 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);
     });
 
     describe('<footer> component and content', 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() {

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;
       });
 

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>

test/cases/nested-elements/nested-elements.spec.js

@@ -31,20 +31,20 @@ 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);
     });
 
     describe('custom footer element', 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() {

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">

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() {

test/cases/single-element/single-element.spec.js

@@ -43,15 +43,15 @@ 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);
     });
 
     describe('<footer> component and content', 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() {