deprecate lightMode config and update website and docs accordingly

build.js

@@ -15,9 +15,7 @@ async function init() {
   const distRoot = './dist';
   const pagesRoot = './docs/pages';
   const pages = await fs.readdir(new URL(pagesRoot, import.meta.url));
-  const { html } = await renderToString(new URL('./docs/layout.js', import.meta.url), {
-    lightMode: true
-  });
+  const { html } = await renderToString(new URL('./docs/layout.js', import.meta.url));
 
   await fs.rm(distRoot, { recursive: true, force: true });
   await fs.mkdir(distRoot, { recursive: true });

docs/components/footer.js

@@ -30,10 +30,7 @@ template.innerHTML = `
 
 class Footer extends HTMLElement {
   connectedCallback() {
-    if (!this.shadowRoot) {
-      this.attachShadow({ mode: 'open' });
-      this.shadowRoot.appendChild(template.content.cloneNode(true));
-    }
+    this.innerHTML = template.content.textContent;
   }
 }
 

docs/components/header.js

@@ -61,10 +61,7 @@ template.innerHTML = `
 
 class Header extends HTMLElement {
   connectedCallback() {
-    if (!this.shadowRoot) {
-      this.attachShadow({ mode: 'open' });
-      this.shadowRoot.appendChild(template.content.cloneNode(true));
-    }
+    this.innerHTML = template.content.textContent;
   }
 }
 

docs/components/navigation.js

@@ -35,10 +35,7 @@ template.innerHTML = `
 
 class Navigation extends HTMLElement {
   connectedCallback() {
-    if (!this.shadowRoot) {
-      this.attachShadow({ mode: 'open' });
-      this.shadowRoot.appendChild(template.content.cloneNode(true));
-    }
+    this.innerHTML = template.content.textContent;
   }
 }
 

docs/layout.js

@@ -36,12 +36,8 @@ template.innerHTML = `
 `;
 
 class Layout extends HTMLElement {
-
   connectedCallback() {
-    if (!this.shadowRoot) {
-      this.attachShadow({ mode: 'open' });
-      this.shadowRoot.appendChild(template.content.cloneNode(true));
-    }
+    this.innerHTML = template.content.textContent;
   }
 }
 

docs/pages/docs.md

@@ -75,21 +75,6 @@ const { html } = await renderFromHTML(`
 
 For example, even if `Header` or `Footer` use `import` to pull in additional custom elements, only the `Header` and `Footer custom elements used in the "entry" HTML are needed in the array.
 
-### Options
-
-`renderToString` and `renderFromHTML` also supports a second and third parameter respectively, that is an object, called `options`
-```js
-// default values
-{
-  lightMode: false
-}
-```
-
-It supports the following configuration(s):
-
-- `lightMode`: For more static outcomes (e.g. no declarative shadow DOM), this option will omit all wrapping `<template shadowroot="...">` tags when rendering out custom elements.  Useful for static sites or working with global CSS libraries.
-
-
 ## Metadata
 
 `renderToString` and `renderFromHTML` return not only HTML, but also metadata about all the custom elements registered as part of rendering the entry file.

src/wcc.js

@@ -23,29 +23,29 @@ function isCustomElementDefinitionNode(node) {
     && expression.callee.property.name === 'define';
 }
 
-async function renderComponentRoots(tree, includeShadowRoots = true) {
+async function renderComponentRoots(tree) {
   for (const node of tree.childNodes) {
     if (node.tagName && node.tagName.indexOf('-') > 0) {
       const { tagName } = node;
       const { moduleURL } = definitions[tagName];
       const elementInstance = await initializeCustomElement(moduleURL, tagName, node.attrs);
       const elementHtml = elementInstance.shadowRoot
-        ? elementInstance.getInnerHTML({ includeShadowRoots })
+        ? elementInstance.getInnerHTML({ includeShadowRoots: true })
         : elementInstance.innerHTML;
       const elementTree = parseFragment(elementHtml);
-      
-      node.childNodes = node.childNodes.length === 0 
+
+      node.childNodes = node.childNodes.length === 0
         ? elementTree.childNodes
         : [...elementTree.childNodes, ...node.childNodes];
     }
 
     if (node.childNodes && node.childNodes.length > 0) {
-      await renderComponentRoots(node, includeShadowRoots);
+      await renderComponentRoots(node);
     }
 
     // does this only apply to `<template>` tags?
     if (node.content && node.content.childNodes && node.content.childNodes.length > 0) {
-      await renderComponentRoots(node.content, includeShadowRoots);
+      await renderComponentRoots(node.content);
     }
   }
 
@@ -125,20 +125,18 @@ async function initializeCustomElement(elementURL, tagName, attrs = []) {
   return elementInstance;
 }
 
-async function renderToString(elementURL, options = {}) {
+async function renderToString(elementURL) {
   definitions = [];
 
-  const { lightMode = false } = options;
-  const includeShadowRoots = !lightMode;
   const elementTagName = await getTagName(elementURL);
   const elementInstance = await initializeCustomElement(elementURL);
 
   const elementHtml = elementInstance.shadowRoot
-    ? elementInstance.getInnerHTML({ includeShadowRoots })
+    ? elementInstance.getInnerHTML({ includeShadowRoots: true })
     : elementInstance.innerHTML;
   const elementTree = getParse(elementHtml)(elementHtml);
-  const finalTree = await renderComponentRoots(elementTree, includeShadowRoots);
-  const html = !lightMode && elementTagName ? `
+  const finalTree = await renderComponentRoots(elementTree);
+  const html = elementTagName ? `
       <${elementTagName}>
         ${serialize(finalTree)}
       </${elementTagName}>
@@ -151,18 +149,15 @@ async function renderToString(elementURL, options = {}) {
   };
 }
 
-async function renderFromHTML(html, elements = [], options = {}) {
+async function renderFromHTML(html, elements = []) {
   definitions = [];
 
-  const { lightMode = false } = options;
-  const includeShadowRoots = !lightMode;
-
   for (const url of elements) {
     await initializeCustomElement(url);
   }
 
   const elementTree = getParse(html)(html);
-  const finalTree = await renderComponentRoots(elementTree, includeShadowRoots);
+  const finalTree = await renderComponentRoots(elementTree);
 
   return {
     html: serialize(finalTree),