feat: default components to light DOM, shadow DOM is opt-in

Change static shadow default from true to false. Components now
render to light DOM by default. Set static shadow = true to opt
into shadow DOM with adoptedStyleSheets.

Author: vivek7405

packages/core/src/component.js

@@ -120,8 +120,8 @@ export class WebComponent extends Base {
   /** Custom element tag name. Subclasses must override. @type {string} */
   static tag = '';
 
-  /** Whether to use shadow DOM. @type {boolean} */
-  static shadow = true;
+  /** Whether to use shadow DOM. Default: false (light DOM). @type {boolean} */
+  static shadow = false;
 
   /**
    * Hydration strategy for this component.
@@ -349,7 +349,7 @@ export class WebComponent extends Base {
   _activate() {
     this._connected = true;
     const Ctor = /** @type any */ (this.constructor);
-    if (Ctor.shadow !== false) {
+    if (Ctor.shadow === true) {
       const hadSSRShadow = !!this.shadowRoot;
       if (!this.shadowRoot) {
         /** @type any */ (this).attachShadow({ mode: 'open' });

packages/core/src/render-server.js

@@ -248,7 +248,7 @@ async function injectDSD(html, ctx) {
     if (ctx && ctx.usedComponents) ctx.usedComponents.add(tag);
     const opening = selfClose ? `<${tag}${attrs}>` : match;
     try {
-      const isShadow = /** @type any */ (Cls).shadow !== false;
+      const isShadow = /** @type any */ (Cls).shadow === true;
       const instance = new /** @type any */ (Cls)();
       const attrMap = parseAttrs(attrs);
       applyAttrsToInstance(instance, attrMap, Cls);