diff --git a/.changeset/cold-spiders-cross.md b/.changeset/cold-spiders-cross.md
new file mode 100644
index 000000000..45a22cf3b
--- /dev/null
+++ b/.changeset/cold-spiders-cross.md
@@ -0,0 +1,8 @@
+---
+'@twind/core': patch
+'@sites/twind.run': patch
+'@sites/twind.style': patch
+'@example/with-web-components': patch
+---
+
+support observing shadow dom (fixes #421)
diff --git a/examples/README.md b/examples/README.md
index 748969b95..07936579e 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -2,10 +2,11 @@
Some examples of how to use the Twind. These are great for reproductions of issues.
-| Example | Try it live at | Description |
-| ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Basic](https://github.com/tw-in-js/twind/tree/main/examples/basic) | [Stackblitz](https://stackblitz.com/fork/github/tw-in-js/twind/tree/main/examples/basic) • [Codesandbox](https://githubbox.com/tw-in-js/twind/tree/main/examples/basic) | using [@twind/preset-autoprefix](https://github.com/tw-in-js/twind/tree/main/packages/preset-autoprefix) and [@twind/preset-tailwind](https://github.com/tw-in-js/twind/tree/main/packages/preset-tailwind) |
-| [Playground](https://github.com/tw-in-js/twind/tree/main/examples/playground) | [Stackblitz](https://stackblitz.com/fork/github/tw-in-js/twind/tree/main/examples/playground) • [Codesandbox](https://githubbox.com/tw-in-js/twind/tree/main/examples/playground) | using using all presets |
+| Example | Try it live at | Description |
+| ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Basic](https://github.com/tw-in-js/twind/tree/main/examples/basic) | [Stackblitz](https://stackblitz.com/fork/github/tw-in-js/twind/tree/main/examples/basic) • [Codesandbox](https://githubbox.com/tw-in-js/twind/tree/main/examples/basic) | using [@twind/preset-autoprefix](https://github.com/tw-in-js/twind/tree/main/packages/preset-autoprefix) and [@twind/preset-tailwind](https://github.com/tw-in-js/twind/tree/main/packages/preset-tailwind) |
+| [Playground](https://github.com/tw-in-js/twind/tree/main/examples/playground) | [Stackblitz](https://stackblitz.com/fork/github/tw-in-js/twind/tree/main/examples/playground) • [Codesandbox](https://githubbox.com/tw-in-js/twind/tree/main/examples/playground) | using using all presets |
+| [Web Components](https://github.com/tw-in-js/twind/tree/main/examples/with-web-components) | [Stackblitz](https://stackblitz.com/fork/github/tw-in-js/twind/tree/main/examples/with-web-components) • [Codesandbox](https://githubbox.com/tw-in-js/twind/tree/main/examples/with-web-components) | using [@twind/preset-autoprefix](https://github.com/tw-in-js/twind/tree/main/packages/preset-autoprefix) and [@twind/preset-tailwind](https://github.com/tw-in-js/twind/tree/main/packages/preset-tailwind) |
## Packages
diff --git a/examples/with-web-components/.stackblitzrc b/examples/with-web-components/.stackblitzrc
new file mode 100644
index 000000000..5490eb1ec
--- /dev/null
+++ b/examples/with-web-components/.stackblitzrc
@@ -0,0 +1,4 @@
+{
+ "installDependencies": true,
+ "startCommand": "npm start"
+}
diff --git a/examples/with-web-components/CHANGELOG.md b/examples/with-web-components/CHANGELOG.md
new file mode 100644
index 000000000..0777dd8b6
--- /dev/null
+++ b/examples/with-web-components/CHANGELOG.md
@@ -0,0 +1,281 @@
+# @example/tailwind-forms
+
+## 1.0.3
+
+### Patch Changes
+
+- Updated dependencies [[`8eb316c6`](https://github.com/tw-in-js/twind/commit/8eb316c6e2736c1c8fde76d0d9b967261a411ced)]:
+ - @twind/core@1.0.3
+ - @twind/preset-autoprefix@1.0.3
+ - @twind/preset-tailwind@1.0.3
+ - @twind/preset-tailwind-forms@1.0.3
+
+## 1.0.2
+
+### Patch Changes
+
+- Updated dependencies [[`0ba8cca0`](https://github.com/tw-in-js/twind/commit/0ba8cca0c5c18dcad7831ae3107c55eedeadc8e1), [`0ba8cca0`](https://github.com/tw-in-js/twind/commit/0ba8cca0c5c18dcad7831ae3107c55eedeadc8e1), [`0ba8cca0`](https://github.com/tw-in-js/twind/commit/0ba8cca0c5c18dcad7831ae3107c55eedeadc8e1)]:
+ - @twind/core@1.0.2
+ - @twind/preset-autoprefix@1.0.2
+ - @twind/preset-tailwind@1.0.2
+ - @twind/preset-tailwind-forms@1.0.2
+
+## 1.0.1
+
+### Patch Changes
+
+- introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version ([`4cab9d2f`](https://github.com/tw-in-js/twind/commit/4cab9d2fc573dd2a91cc6667510ff1b7b890854b))
+
+- Updated dependencies [[`4cab9d2f`](https://github.com/tw-in-js/twind/commit/4cab9d2fc573dd2a91cc6667510ff1b7b890854b), [`4cab9d2f`](https://github.com/tw-in-js/twind/commit/4cab9d2fc573dd2a91cc6667510ff1b7b890854b)]:
+ - @twind/core@1.0.1
+ - @twind/preset-autoprefix@1.0.1
+ - @twind/preset-tailwind@1.0.1
+ - @twind/preset-tailwind-forms@1.0.1
+
+## 1.0.0
+
+### Patch Changes
+
+- big documentation update ([`a63ca2cb`](https://github.com/tw-in-js/twind/commit/a63ca2cbf450d8a6f72f4d60f5856cee88d16911))
+
+- Updated dependencies [[`fe891f9c`](https://github.com/tw-in-js/twind/commit/fe891f9c7990a041e0eccaff9a4f58d0834d46d2), [`a63ca2cb`](https://github.com/tw-in-js/twind/commit/a63ca2cbf450d8a6f72f4d60f5856cee88d16911), [`2ac8e695`](https://github.com/tw-in-js/twind/commit/2ac8e6950ad37bac0eb88116448bee8738388f59), [`eeb8049a`](https://github.com/tw-in-js/twind/commit/eeb8049adeeabc6b5c970682bb78d3301022dd4e), [`e2c17a2e`](https://github.com/tw-in-js/twind/commit/e2c17a2e8087875f1725e3b07bc32218d2f0c2c0), [`d481948b`](https://github.com/tw-in-js/twind/commit/d481948b0513a59cc3495d5e31f0437c9690d59b), [`a61e0d1d`](https://github.com/tw-in-js/twind/commit/a61e0d1d4a31be6f398b57ceefffdb04b6bceccf), [`9cff65de`](https://github.com/tw-in-js/twind/commit/9cff65de91d9525cbd5fd04cd2c4618089440317), [`c5294b03`](https://github.com/tw-in-js/twind/commit/c5294b036cf2292278f11f8467b48cb784554915), [`e6acbea2`](https://github.com/tw-in-js/twind/commit/e6acbea2f48e3c6441e0cf71cd069f48500ca493), [`f1c81c9f`](https://github.com/tw-in-js/twind/commit/f1c81c9fdb4154f55598a7cb5a979dc94d92204b), [`2ac8e695`](https://github.com/tw-in-js/twind/commit/2ac8e6950ad37bac0eb88116448bee8738388f59), [`0705e419`](https://github.com/tw-in-js/twind/commit/0705e41946e191974da76c2b27019755520d9c0a), [`e404e844`](https://github.com/tw-in-js/twind/commit/e404e844c2c0c91a056802d99079ad8ec49c5810), [`edc16da4`](https://github.com/tw-in-js/twind/commit/edc16da48d7b79d5209a383255e3ee386fd170c0), [`abb35f5c`](https://github.com/tw-in-js/twind/commit/abb35f5c1b60287e71ae2c6be4da170c307a891d)]:
+ - twind@1.0.0
+ - @twind/preset-autoprefix@1.0.0
+ - @twind/preset-tailwind@1.0.0
+ - @twind/preset-tailwind-forms@1.0.0
+
+## 0.0.1-next.24
+
+### Patch Changes
+
+- Updated dependencies [[`3d192886`](https://github.com/tw-in-js/twind/commit/3d19288619cd54ded867eb83df0cb64c78038438), [`8f2ddfa2`](https://github.com/tw-in-js/twind/commit/8f2ddfa242bb83c3d898673cc542fe9ec1c38804), [`774e2bb4`](https://github.com/tw-in-js/twind/commit/774e2bb4c7a019d76e55296e9af75fedc77bd054), [`31928160`](https://github.com/tw-in-js/twind/commit/319281607cdaf42a97625c4a100ba5cba73c900c), [`226f38dd`](https://github.com/tw-in-js/twind/commit/226f38dd1b2633a210cfdb620509948f8cd8a5f3), [`a3b1bcba`](https://github.com/tw-in-js/twind/commit/a3b1bcba6269bc4a51b63041689baf58f6222b7f), [`0e2aa5c4`](https://github.com/tw-in-js/twind/commit/0e2aa5c4f07e5bca3bea37f864773f665935a263), [`9b5e3297`](https://github.com/tw-in-js/twind/commit/9b5e3297470f9d2bdbd4f540d819ee0f42e63595), [`db7ab089`](https://github.com/tw-in-js/twind/commit/db7ab089d4f8f938e6d69202172059848bc074f9), [`cd694cee`](https://github.com/tw-in-js/twind/commit/cd694cee79db80cb9625b7e55da0c2792a52a6c4), [`0a63948e`](https://github.com/tw-in-js/twind/commit/0a63948e9f6c5f1bb8088ae6e21dc4bf215ee9e8), [`b2b7e40d`](https://github.com/tw-in-js/twind/commit/b2b7e40d39406b8d04f72cac6c980775e64df6c4), [`bdc0a7a1`](https://github.com/tw-in-js/twind/commit/bdc0a7a1c353990d0ef009af181f79c1134bfcec), [`a73f1773`](https://github.com/tw-in-js/twind/commit/a73f17734519413fc0dc567c8ff9330de6163aec), [`f74163ba`](https://github.com/tw-in-js/twind/commit/f74163ba7310ece8d2de4a80586d19df419bfa86), [`f0e532f1`](https://github.com/tw-in-js/twind/commit/f0e532f18162f863461858656ce4e83287fd4f23), [`65ea2f61`](https://github.com/tw-in-js/twind/commit/65ea2f6141340fadd99412bb7199a69c328f276f)]:
+ - @twind/preset-tailwind@1.0.0-next.39
+ - twind@1.0.0-next.39
+ - @twind/preset-autoprefix@1.0.0-next.39
+ - @twind/preset-tailwind-forms@1.0.0-next.39
+
+## 0.0.1-next.23
+
+### Patch Changes
+
+- Updated dependencies [[`b212b52f`](https://github.com/tw-in-js/twind/commit/b212b52fbd53e9ecb38d97589ca2f717445ed185), [`782f93df`](https://github.com/tw-in-js/twind/commit/782f93df6abb1ebd24ef6c45dc08de602e198107), [`fe88051d`](https://github.com/tw-in-js/twind/commit/fe88051deb3176d014ba527471b1345c47bfb28e), [`77954405`](https://github.com/tw-in-js/twind/commit/7795440566fc95a424a7f6210998dd1d16ef216f)]:
+ - twind@1.0.0-next.38
+ - @twind/preset-autoprefix@1.0.0-next.38
+ - @twind/preset-tailwind@1.0.0-next.38
+ - @twind/preset-tailwind-forms@1.0.0-next.38
+
+## 0.0.1-next.22
+
+### Patch Changes
+
+- Updated dependencies [[`08c66ee8`](https://github.com/tw-in-js/twind/commit/08c66ee8f7f80a6c998a380acc4f44280aef3280)]:
+ - twind@1.0.0-next.37
+ - @twind/preset-autoprefix@1.0.0-next.37
+ - @twind/preset-tailwind@1.0.0-next.37
+ - @twind/preset-tailwind-forms@1.0.0-next.37
+
+## 0.0.1-next.21
+
+### Patch Changes
+
+- Updated dependencies [[`28cbaef5`](https://github.com/tw-in-js/twind/commit/28cbaef54f226e7542e9197b0dab69e55f588806), [`43d61076`](https://github.com/tw-in-js/twind/commit/43d610769152aef2943383b3a2574b9be01acc49), [`80ce410a`](https://github.com/tw-in-js/twind/commit/80ce410a60892ba70fa8805a37aa89f0dbc13c7d), [`39b45125`](https://github.com/tw-in-js/twind/commit/39b451256c10bd6f82f45015effbefb41aee8a76), [`2f8f69d2`](https://github.com/tw-in-js/twind/commit/2f8f69d27531fad4346af57f0fef3f473d2c6ee3), [`9fc5baec`](https://github.com/tw-in-js/twind/commit/9fc5baeca6031d27ac81402b0e614d01c3cd20e7), [`aaad7e44`](https://github.com/tw-in-js/twind/commit/aaad7e4426068a55b00e23df2e084cfc8a46b2ca), [`ae979d12`](https://github.com/tw-in-js/twind/commit/ae979d12fe01cfed32c44eea23ef8a9f2d983eae), [`fc9b0c27`](https://github.com/tw-in-js/twind/commit/fc9b0c277f26e0fc1aad693bd13a80d50b27c71c), [`5819ce9c`](https://github.com/tw-in-js/twind/commit/5819ce9cf7103a3d39ee0b05aad9a5dcb3d307c8), [`f68b30db`](https://github.com/tw-in-js/twind/commit/f68b30db6a029e6e76f33ff3da21ea1fbf5d618b), [`346efc4e`](https://github.com/tw-in-js/twind/commit/346efc4e84042d043e17bac8d829f0408279448e), [`8bbc2a42`](https://github.com/tw-in-js/twind/commit/8bbc2a426054cedc705392eb51aebf0029547d67), [`8dfd105b`](https://github.com/tw-in-js/twind/commit/8dfd105bf0b10d82e3d024b6a318a4b7e6064d90)]:
+ - twind@1.0.0-next.36
+ - @twind/preset-tailwind@1.0.0-next.36
+ - @twind/preset-autoprefix@1.0.0-next.36
+ - @twind/preset-tailwind-forms@1.0.0-next.36
+
+## 0.0.1-next.20
+
+### Patch Changes
+
+- Updated dependencies [[`009594c6`](https://github.com/tw-in-js/twind/commit/009594c65fb7d0f1da0203c6b6c26bd258ee46d0), [`53058c2e`](https://github.com/tw-in-js/twind/commit/53058c2ea0f5fbdbb852f42d1c7de47c70dee0bf)]:
+ - twind@1.0.0-next.35
+ - @twind/preset-tailwind@1.0.0-next.35
+ - @twind/preset-autoprefix@1.0.0-next.35
+ - @twind/preset-tailwind-forms@1.0.0-next.35
+
+## 0.0.1-next.19
+
+### Patch Changes
+
+- Updated dependencies [[`b56b7282`](https://github.com/tw-in-js/twind/commit/b56b7282cb92cbadd70c8d9dd80be54d665093fe), [`a3191b5f`](https://github.com/tw-in-js/twind/commit/a3191b5ff0bd2b415fe8589f6a369501f239f7c1), [`b9da668c`](https://github.com/tw-in-js/twind/commit/b9da668c12aa80daedf3240f4b721d25b41fc0c4), [`a3191b5f`](https://github.com/tw-in-js/twind/commit/a3191b5ff0bd2b415fe8589f6a369501f239f7c1)]:
+ - twind@1.0.0-next.34
+ - @twind/preset-tailwind-forms@1.0.0-next.34
+ - @twind/tailwind@1.0.0-next.34
+
+## 0.0.1-next.18
+
+### Patch Changes
+
+- Updated dependencies [[`b223e5bb`](https://github.com/tw-in-js/twind/commit/b223e5bb9f701db03c30e14d3f7b84b705d43ef0), [`f7650fe8`](https://github.com/tw-in-js/twind/commit/f7650fe81f20e4f711f7766b5886cb72e0af67d2), [`92037344`](https://github.com/tw-in-js/twind/commit/92037344787e28454ffa688b969244f261d28306)]:
+ - @twind/tailwind@1.0.0-next.33
+ - twind@1.0.0-next.33
+ - @twind/preset-tailwind-forms@1.0.0-next.33
+
+## 0.0.1-next.17
+
+### Patch Changes
+
+- Updated dependencies [[`916e7fb9`](https://github.com/tw-in-js/twind/commit/916e7fb928e3e90703126792d704ad561bc1d01a)]:
+ - twind@1.0.0-next.32
+ - @twind/preset-tailwind-forms@1.0.0-next.32
+ - @twind/tailwind@1.0.0-next.32
+
+## 0.0.1-next.16
+
+### Patch Changes
+
+- Updated dependencies [[`57405812`](https://github.com/tw-in-js/twind/commit/57405812281dd1bf32b1250c459db9a48466786c)]:
+ - twind@1.0.0-next.31
+ - @twind/preset-tailwind-forms@1.0.0-next.31
+ - @twind/tailwind@1.0.0-next.31
+
+## 0.0.1-next.15
+
+### Patch Changes
+
+- Updated dependencies [[`39001d2a`](https://github.com/tw-in-js/twind/commit/39001d2a2b6718a92080ae47cb6157d1077405b3)]:
+ - twind@1.0.0-next.30
+ - @twind/preset-tailwind-forms@1.0.0-next.30
+ - @twind/tailwind@1.0.0-next.30
+
+## 0.0.1-next.14
+
+### Patch Changes
+
+- Updated dependencies [[`a15d2655`](https://github.com/tw-in-js/twind/commit/a15d26559f3b04144552e3123c04672c4260b23b), [`b758c748`](https://github.com/tw-in-js/twind/commit/b758c7480949fb304bbed7d1f8214694733f666e), [`e1d3433a`](https://github.com/tw-in-js/twind/commit/e1d3433a985a906454d53b289554db026dbd527d), [`2c823293`](https://github.com/tw-in-js/twind/commit/2c82329376ef3f743bc25f355468f4a45c36a3e6), [`a2a343cc`](https://github.com/tw-in-js/twind/commit/a2a343ccf7ea734b87d44da4545f70400242b748)]:
+ - twind@1.0.0-next.29
+ - @twind/preset-tailwind-forms@1.0.0-next.29
+ - @twind/tailwind@1.0.0-next.29
+
+## 0.0.1-next.13
+
+### Patch Changes
+
+- Updated dependencies [[`24b095af`](https://github.com/tw-in-js/twind/commit/24b095af51195a43fe32229e5560aed088b97c0a), [`b7280003`](https://github.com/tw-in-js/twind/commit/b728000391cffea29eb4215b79a1b23d75751fe8)]:
+ - twind@1.0.0-next.28
+ - @twind/preset-tailwind-forms@1.0.0-next.28
+ - @twind/tailwind@1.0.0-next.28
+
+## 0.0.1-next.12
+
+### Patch Changes
+
+- Updated dependencies [[`bbbbd88e`](https://github.com/tw-in-js/twind/commit/bbbbd88efc7cb8c0c1b73ade9249389958e1d7cf), [`e8eaae8b`](https://github.com/tw-in-js/twind/commit/e8eaae8b6034b3117bf781ec374c1cd7e05a2d26), [`b526c888`](https://github.com/tw-in-js/twind/commit/b526c88843424ef8a6caf93c3236947b59414edd)]:
+ - @twind/preset-tailwind-forms@1.0.0-next.27
+ - @twind/tailwind@1.0.0-next.27
+ - twind@1.0.0-next.27
+
+## 0.0.1-next.11
+
+### Patch Changes
+
+- Updated dependencies [[`bb288434`](https://github.com/tw-in-js/twind/commit/bb2884347354f3edb2fc888ad1a27d953639b91b), [`063b002b`](https://github.com/tw-in-js/twind/commit/063b002bafd4782e7d75cd7bf008d237ab4d5649), [`966fcb93`](https://github.com/tw-in-js/twind/commit/966fcb93448ea7fe9e69cd5e67df84163a83617c), [`f1fe9a81`](https://github.com/tw-in-js/twind/commit/f1fe9a8180f828da1985b166d4abb0e0e30bc1e0), [`2b91cf29`](https://github.com/tw-in-js/twind/commit/2b91cf29967d9fa26d95d792650cfbf3b4ead9c3), [`49002cac`](https://github.com/tw-in-js/twind/commit/49002cac273d4e6502e98d985174a27a2b87b7d2)]:
+ - twind@1.0.0-next.26
+ - @twind/preset-tailwind-forms@1.0.0-next.26
+ - @twind/tailwind@1.0.0-next.26
+
+## 0.0.1-next.10
+
+### Patch Changes
+
+- Updated dependencies [[`4527aa91`](https://github.com/tw-in-js/twind/commit/4527aa919f853d613c89df9dde2587173cb91a3a)]:
+ - @twind/preset-tailwind-forms@1.0.0-next.25
+ - @twind/tailwind@1.0.0-next.25
+ - twind@1.0.0-next.25
+
+## 0.0.1-next.9
+
+### Patch Changes
+
+- Updated dependencies [[`18f0caff`](https://github.com/tw-in-js/twind/commit/18f0caffb903f0de7f5e7d2f1b8f816e5d0d9fad), [`a415d389`](https://github.com/tw-in-js/twind/commit/a415d3896ec1981cf1d9a2f884a07be9c8a86bcc), [`1800dec7`](https://github.com/tw-in-js/twind/commit/1800dec790a3487280d3342f6a00c32c7221f207), [`90da3bbc`](https://github.com/tw-in-js/twind/commit/90da3bbc7d47a26453adf5414012d0f5a2892f5a)]:
+ - twind@1.0.0-next.24
+ - @twind/preset-tailwind-forms@1.0.0-next.24
+ - @twind/tailwind@1.0.0-next.24
+
+## 0.0.1-next.8
+
+### Patch Changes
+
+- Updated dependencies [[`0478b45f`](https://github.com/tw-in-js/twind/commit/0478b45fd3dcd4aff85502d7b60dbebed950ac11), [`83a0195d`](https://github.com/tw-in-js/twind/commit/83a0195d8da69bf9437256e484f3f4c3eb4262d7), [`8a4e6ddb`](https://github.com/tw-in-js/twind/commit/8a4e6ddb7284f80d94b9a032d97084eaca44d59f), [`3c0e3f72`](https://github.com/tw-in-js/twind/commit/3c0e3f72902fd2568a3ca1847038db7f9eb0b073)]:
+ - twind@1.0.0-next.23
+ - @twind/preset-tailwind-forms@1.0.0-next.23
+ - @twind/tailwind@1.0.0-next.23
+
+## 0.0.1-next.7
+
+### Patch Changes
+
+- Updated dependencies [[`877152d1`](https://github.com/tw-in-js/twind/commit/877152d1401287aaeaa3f5405ce3d4c9673f7bf0), [`059f8564`](https://github.com/tw-in-js/twind/commit/059f8564dad74c10125336aad582fccc32036e31), [`b9d64777`](https://github.com/tw-in-js/twind/commit/b9d64777993f824d4468d5ba415e7d8a4d17e6cf), [`f1c1d08f`](https://github.com/tw-in-js/twind/commit/f1c1d08f0661ccbfe0894a887a3c67abbe893bb8), [`efa7bbc0`](https://github.com/tw-in-js/twind/commit/efa7bbc03f1ffe78a4b9c67b4eedd4cacaf07837), [`9e312afd`](https://github.com/tw-in-js/twind/commit/9e312afda47f4415dc79636d294411bff1514e00)]:
+ - twind@1.0.0-next.22
+ - @twind/tailwind@1.0.0-next.22
+ - @twind/preset-tailwind-forms@1.0.0-next.22
+
+## 0.0.1-next.6
+
+### Patch Changes
+
+- Updated dependencies [[`3d4580f7`](https://github.com/tw-in-js/twind/commit/3d4580f79d0a96a55061724ca971f105b31019a6), [`0a2daf0f`](https://github.com/tw-in-js/twind/commit/0a2daf0f3daf7ebfde103407b5c0e914625c17c9), [`762c5153`](https://github.com/tw-in-js/twind/commit/762c515362f09e13e93ea8c10aa84109b65f13b3)]:
+ - @twind/tailwind@1.0.0-next.21
+ - twind@1.0.0-next.21
+ - @twind/preset-tailwind-forms@1.0.0-next.21
+
+## 0.0.1-next.5
+
+### Patch Changes
+
+- perf: optimize observe to only handle changes on element with class attribute ([`88eeb077`](https://github.com/tw-in-js/twind/commit/88eeb07798e70860c840278ac97e7a2ba6ee8366))
+
+* revert: remove dom sheet ([`6d50cf5f`](https://github.com/tw-in-js/twind/commit/6d50cf5f7bd8fb79caf02a81c30060c8abf2382e))
+
+* Updated dependencies [[`88eeb077`](https://github.com/tw-in-js/twind/commit/88eeb07798e70860c840278ac97e7a2ba6ee8366), [`6d50cf5f`](https://github.com/tw-in-js/twind/commit/6d50cf5f7bd8fb79caf02a81c30060c8abf2382e)]:
+ - @twind/preset-tailwind-forms@1.0.0-next.20
+ - @twind/tailwind@1.0.0-next.20
+ - twind@1.0.0-next.20
+
+## 0.0.1-next.4
+
+### Patch Changes
+
+- Updated dependencies [[`1f578c9e`](https://github.com/tw-in-js/twind/commit/1f578c9ede1882ee714db249a6bed48c0e1e3059)]:
+ - twind@1.0.0-next.19
+ - @twind/preset-tailwind-forms@1.0.0-next.19
+ - @twind/tailwind@1.0.0-next.19
+
+## 0.0.1-next.3
+
+### Patch Changes
+
+- Updated dependencies [[`d3728a92`](https://github.com/tw-in-js/twind/commit/d3728a92bcfd86ca83cb14d10d8dc29fdc181b03)]:
+ - twind@1.0.0-next.18
+ - @twind/preset-tailwind-forms@1.0.0-next.18
+ - @twind/tailwind@1.0.0-next.18
+
+## 0.0.1-next.2
+
+### Patch Changes
+
+- bump to same version ([`ca157601`](https://github.com/tw-in-js/twind/commit/ca1576017f172bfb0ba61e936f0f44d36102016c))
+
+- Updated dependencies [[`ca157601`](https://github.com/tw-in-js/twind/commit/ca1576017f172bfb0ba61e936f0f44d36102016c)]:
+ - @twind/preset-tailwind-forms@1.0.0-next.17
+ - @twind/tailwind@1.0.0-next.17
+ - twind@1.0.0-next.17
+
+## 0.0.1-next.1
+
+### Patch Changes
+
+- Updated dependencies [[`6bdf326f`](https://github.com/tw-in-js/twind/commit/6bdf326f8aa41bfdc89d77a47f24433536f3c9a5), [`82de0d53`](https://github.com/tw-in-js/twind/commit/82de0d53755f35c72fe41200f9091bdc2c960f83)]:
+ - twind@1.0.0-next.16
+ - @twind/preset-tailwind-forms@1.0.0-next.15
+
+## 0.0.1-next.0
+
+### Patch Changes
+
+- add example for @twind/preset-tailwind-forms ([`1d81ca46`](https://github.com/tw-in-js/twind/commit/1d81ca46ccfec74e8264a463fb17dca8fd078c5e))
+
+- Updated dependencies [[`61509050`](https://github.com/tw-in-js/twind/commit/61509050a539a0e2e28ec961f7e7bc8ffa15a9e0), [`fe81c40c`](https://github.com/tw-in-js/twind/commit/fe81c40c844cc8397205906966142fac5e5ded5b), [`d45cdfd9`](https://github.com/tw-in-js/twind/commit/d45cdfd98ebccabc3c9376660a077b29f295765b), [`01ac6b62`](https://github.com/tw-in-js/twind/commit/01ac6b62dabf1c2217342ce4ec23ffef272ab780), [`d9123489`](https://github.com/tw-in-js/twind/commit/d912348915675a1928df91965b701d7b6eefebf8), [`9fa543cb`](https://github.com/tw-in-js/twind/commit/9fa543cbd53190ae38611957b20a4d3a163d89e4)]:
+ - twind@1.0.0-next.15
+ - @twind/preset-tailwind-forms@1.0.0-next.14
diff --git a/examples/with-web-components/README.md b/examples/with-web-components/README.md
new file mode 100644
index 000000000..f53eed45e
--- /dev/null
+++ b/examples/with-web-components/README.md
@@ -0,0 +1,9 @@
+# Example: Web Components
+
+> Try it live at [Stackblitz](https://stackblitz.com/fork/github/tw-in-js/twind/tree/main/examples/with-web-components) or [Codesandbox](https://githubbox.com/tw-in-js/twind/tree/main/examples/with-web-components).
+
+This example uses
+
+- [@twind/core](https://github.com/tw-in-js/twind/tree/main/packages/core)
+- [@twind/preset-autoprefix](https://github.com/tw-in-js/twind/tree/main/packages/preset-autoprefix)
+- [@twind/preset-tailwind](https://github.com/tw-in-js/twind/tree/main/packages/preset-tailwind)
diff --git a/examples/with-web-components/favicon.ico b/examples/with-web-components/favicon.ico
new file mode 100644
index 000000000..624dbf697
Binary files /dev/null and b/examples/with-web-components/favicon.ico differ
diff --git a/examples/with-web-components/index.html b/examples/with-web-components/index.html
new file mode 100644
index 000000000..b0e2cbf2f
--- /dev/null
+++ b/examples/with-web-components/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+ Using Web Components with Twind
+
+
+
+
diff --git a/examples/with-web-components/index.js b/examples/with-web-components/index.js
new file mode 100644
index 000000000..ef37536b5
--- /dev/null
+++ b/examples/with-web-components/index.js
@@ -0,0 +1,49 @@
+/* eslint-env browser */
+
+import { twind, cssom, observe } from '@twind/core'
+import config from './twind.config'
+
+try {
+ // 1. Create separate CSSStyleSheet
+ const sheet = cssom(new CSSStyleSheet())
+
+ // 2. Use that to create an own twind instance
+ const tw = twind(config, sheet)
+
+ class TwindElement extends HTMLElement {
+ constructor() {
+ super()
+
+ const shadow = this.attachShadow({ mode: 'open' })
+
+ // 3. Apply the same style to each instance of this component
+ shadow.adoptedStyleSheets = [sheet.target]
+
+ // 4a. Observe using "own" tw function
+ observe(tw, shadow)
+
+ shadow.innerHTML = `
+
+
+ This is Twind!
+
+
+ `
+
+ // 4b. Use "own" tw function directly
+ // shadow.innerHTML = `
+ //
+ //
+ // This is Twind!
+ //
+ //
+ // `
+ }
+ }
+
+ customElements.define('twind-element', TwindElement)
+
+ document.body.innerHTML = ''
+} catch (error) {
+ document.body.innerHTML = `Your browser does not support Constructable Stylesheets: ${error.message}
`
+}
diff --git a/examples/with-web-components/package.json b/examples/with-web-components/package.json
new file mode 100644
index 000000000..6a7d2ffe6
--- /dev/null
+++ b/examples/with-web-components/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "@example/with-web-components",
+ "description": "Web Components example",
+ "version": "1.0.3",
+ "private": true,
+ "main": "index.js",
+ "license": "MIT",
+ "bugs": "https://github.com/tw-in-js/twind/issues",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/tw-in-js/twind.git",
+ "directory": "examples/with-web-components"
+ },
+ "engines": {
+ "node": ">=14"
+ },
+ "type": "module",
+ "scripts": {
+ "start": "vite",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@twind/core": "1.0.3",
+ "@twind/preset-autoprefix": "1.0.3",
+ "@twind/preset-tailwind": "1.0.3"
+ },
+ "devDependencies": {
+ "vite": "^4.0.1"
+ }
+}
diff --git a/examples/with-web-components/sandbox.config.json b/examples/with-web-components/sandbox.config.json
new file mode 100644
index 000000000..c37d319bd
--- /dev/null
+++ b/examples/with-web-components/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+ "// https://github.com/codesandbox/codesandbox-importers/blob/master/packages/types/index.d.ts#L39-L64": "",
+ "template": "node",
+ "container": {
+ "node": "16"
+ }
+}
diff --git a/examples/with-web-components/twind.config.js b/examples/with-web-components/twind.config.js
new file mode 100644
index 000000000..508f5e370
--- /dev/null
+++ b/examples/with-web-components/twind.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from '@twind/core'
+import presetAutoprefix from '@twind/preset-autoprefix'
+import presetTailwind from '@twind/preset-tailwind'
+
+export default defineConfig({
+ presets: [presetAutoprefix(), presetTailwind()],
+ /* config */
+})
diff --git a/packages/core/src/observe.ts b/packages/core/src/observe.ts
index 9620401db..55e30824b 100644
--- a/packages/core/src/observe.ts
+++ b/packages/core/src/observe.ts
@@ -61,7 +61,8 @@ export function observe(
function handleClassAttributeChange(target: Element): void {
// Not using target.classList.value (not supported in all browsers) or target.class (this is an SVGAnimatedString for svg)
- const tokens = target.getAttribute('class')
+ // safe guard access to getAttribute because ShadowRoot does not have attribute but child nodes
+ const tokens = target.getAttribute?.('class')
let className: string
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3ba587246..ce5f30ee3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -136,6 +136,19 @@ importers:
devDependencies:
serve: 13.0.4
+ examples/with-web-components:
+ specifiers:
+ '@twind/core': 1.0.3
+ '@twind/preset-autoprefix': 1.0.3
+ '@twind/preset-tailwind': 1.0.3
+ vite: ^4.0.1
+ dependencies:
+ '@twind/core': link:../../packages/core
+ '@twind/preset-autoprefix': link:../../packages/preset-autoprefix
+ '@twind/preset-tailwind': link:../../packages/preset-tailwind
+ devDependencies:
+ vite: 4.0.1
+
examples/with-gatsby:
specifiers:
'@twind/core': 1.0.3