Web components are kind of working

If I were doing this for real, I'd make a separate web components bundle so there are no side effects in the npm package. Problem right now is being able to pass `children` to web components. Going to try https://github.com/jahilldev/component-elements/tree/main/packages/preactement#readme next based on [this issue thread](preactjs/preact-custom-element#41)

examples/cdn-preact/index.html

@@ -45,6 +45,10 @@ <h1 class="ds-h1">CDN Example</h1>
           );
         </script>
 
+        <ds-alert variation="error" heading="WHOA!!!!!" children="Weeeee!!!">
+          <span slot="children">Weeeeeee!!!</span>
+        </ds-alert>
+
         <form>
           <div id="month-picker"></div>
           <script>

packages/design-system/package.json

@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "dist/components/index.js",
   "module": "dist/esnext/index.esm.js",
-  "sideEffects": false,
+  "sideEffects": ["./dist/esnext/web-components/ds-alert.js"],
   "types": "dist/types/index.d.ts",
   "files": [
     "dist",
@@ -40,6 +40,7 @@
     "inquirer": "^9.0.2",
     "lodash": "^4.17.21",
     "ora": "^6.1.2",
+    "preact-custom-element": "4.2.1",
     "prop-types": "^15.8.1",
     "react-day-picker": "^8.0.5",
     "react-transition-group": "^4.4.2",

packages/design-system/src/components/index.ts

@@ -28,6 +28,8 @@ export * from './UsaBanner';
 export * from './VerticalNav';
 export * from './Icons';
 
+import './web-components/ds-alert';
+
 export * from './analytics';
 export * from './flags';
 export * from './i18n';

packages/design-system/src/components/web-components/ds-alert.ts

@@ -0,0 +1,16 @@
+import register from 'preact-custom-element';
+import Alert, { AlertProps } from '../Alert/Alert';
+
+const observedAttributes: Array<keyof AlertProps> = [
+  'className',
+  'heading',
+  'headingId',
+  'hideIcon',
+  'role',
+  'weight',
+  'variation',
+];
+
+// In order for slots to work with `preact-custom-element`, shadow dom has to be
+// enabled, but unfortunately that will break the styles because they're global.
+register(Alert, 'ds-alert', observedAttributes, { shadow: false });

yarn.lock

@@ -20459,6 +20459,11 @@ postcss@^8.2.9, postcss@^8.3.11, postcss@^8.4.12:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+[email protected]:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/preact-custom-element/-/preact-custom-element-4.2.1.tgz#a18752ef60823ea61199d9cdc1866e51139b3f46"
+  integrity sha512-/fiEEAyC+MXRlCBRmv/owoN5BLpO2nF/MF3YBHLtp4C2lNqlhV+a4he74A5DhfDoRmxDHm0sYVgQzWFEyzTDsw==
+
 [email protected]:
   version "10.11.3"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.11.3.tgz#8a7e4ba19d3992c488b0785afcc0f8aa13c78d19"