omit `<template>` from rendered declarative shadow dom (support static HTML workflows)

[thescientist13]

Type of Change

• New Feature Request

Summary

As Declarative Shadow DOM is not supported yet across all browsers (Safari, FF), rendering something like this to one of those browsers

<wcc-footer>
  <template shadowroot="open">        
    <style>
      footer {
        bottom: 0;
        width: 100%;
        background-color: var(--accent);
        min-height: 30px;
        padding-top: 10px;
        grid-column: 1 / -1;
      }
  
      footer a {
        color: #efefef;
        text-decoration: none;
      }
  
      footer h4 {
        width: 90%;
        margin: 0 auto;
        padding: 0;
        text-align: center;
      }
    </style>

    <footer>
      <h4>
        <a href="https://projectevergreen.github.io">WCC ◈ Project Evergreen</a>
      </h4>
    </footer>

  </template>
</wcc-footer>

will result in missing content for that section of the HTML, because by definition, <template> tags are inert and not rendered by the browser.

Notice in the screenshot below, the Footer HTML is missing.

Details

There is a polyfill for this but that obviously requires JS, but if you want to author / use Web Components using SSG / SSR, but ship entirely static content with no JS (not taking into account upcoming hydration strategies), the polyfill would be no go. So it would be nice to offer a configuration option to renderToString to break out of that "content" trap.

Another upside, is that this could make working with global CSS easier, since there would be no Shadow DOM anymore.

Potentially name it after includeShadowRoots?