Merge pull request #137 from oddbird/inject-stylesheets-automatically…

…-in-the-js

inject stylesheets automatically in the JS

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- 💥 BREAKING: Automatically inject styles from JS --
+  [#137](https://github.com/oddbird/popover-polyfill/pull/137)
 - 🏠 INTERNAL: Upgrade dependencies
 
 ## 0.2.3: 2023-09-18

CONTRIBUTING.md

@@ -21,9 +21,9 @@ Please follow the [OddBird Code of Conduct](https://www.oddbird.net/conduct/).
 
 ## Code style
 
-JS code is formatted with prettier, and CSS is formatted with stylelint. You can
-lint the code by running `npm run lint` and format it with `npm run format`. We
-recommend setting up your IDE to automatically format code for you.
+JS code is formatted with prettier. You can lint the code by running `npm run
+lint` and format it with `npm run format`. We recommend setting up your IDE to
+automatically format code for you.
 
 ## Testing
 

README.md

@@ -31,18 +31,7 @@ Or without [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/Jav
 <script src="/path/to/popover.iife.min.js"></script>
 ```
 
-You will also likely need the CSS file, which supplies some default styles.
-Download `popover.css` [from
-unpkg.com](https://unpkg.com/browse/@oddbird/popover-polyfill/dist/) and add it
-to the appropriate directory in your project. Then, include it where necessary
-with a `<link rel=stylesheet>` tag:
-
-```html
-<link rel="stylesheet" href="/path/to/popover.css" />
-```
-
-Note that default styles will not be applied to shadow roots.
-Each root node will need to include the styles separately.
+Note that the JS will inject CSS styles into your document (or ShadowRoot).
 
 ### With npm
 
@@ -56,9 +45,6 @@ npm install @oddbird/popover-polyfill
 After installing, you’ll need to use appropriate tooling to use
 `node_modules/@oddbird/popover-polyfill/dist/popover.js`.
 
-You will also likely need to include the CSS stylesheet which is found in
-`node_modules/@oddbird/popover-polyfill/dist/popover.css`.
-
 If you want to manually apply the polyfill, you can instead import the
 `isSupported` and `apply` functions directly from
 `node_modules/@oddbird/popover-polyfill/dist/popover-fn.js` file.
@@ -71,11 +57,6 @@ reasons](https://blog.wesleyac.com/posts/why-not-javascript-cdn) such as
 performance and robustness.
 
 ```html
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@oddbird/popover-polyfill@latest/dist/popover.css"
-  crossorigin="anonymous"
-/>
 <script
   src="https://cdn.jsdelivr.net/npm/@oddbird/popover-polyfill@latest"
   crossorigin="anonymous"
@@ -126,6 +107,22 @@ some caveats which will need accommodations:
   observers or frameworks which do DOM diffing, or it may interfere with other
   code which sets `aria-expanded` on elements.
 
+- The polyfill uses `adoptedStyleSheets` to inject CSS onto the page (and each
+  Shadow DOM). If it can't use that it'll generate a `<style>` tag instead. This
+  means you may see a `<style>` tag you didn't put there, and this _may_ impact
+  mutation observers or frameworks.
+
+  - For browsers which don't support `adoptedStyleSheets` on Shadow Roots, if
+    you are building a ShadowRoot by setting `.innerHTML`, you'll remove the
+    StyleSheet. Either polyfill `adoptedStyleSheets` or call
+    `injectStyles(myShadow)` to add the styles back in.
+
+  - Similarly, if you're using Declarative ShadowDOM or otherwise creating a
+    shadow root without calling `attachShadow`/`attachInternals`, then the
+    polyfill won't inject the styles (because it can't reference the
+    `shadowRoot`). You'll need to manually inject the styles yourself with
+    `injectStyles(myShadow)`.
+
 ## Contributing
 
 Visit our [contribution guidelines](https://github.com/oddbird/popover-polyfill/blob/main/CONTRIBUTING.md).

index.html

@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Popover Attribute Polyfill</title>
     <script src="./dist/popover.js"></script>
-    <link rel="stylesheet" href="./dist/popover.css" />
   </head>
 
   <body>
@@ -63,10 +62,6 @@ <h1>Popover Attribute Polyfill</h1>
                 <div>
                   <div id="shadowedNestedPopover" popover="auto">Shadowed Nested Popover (auto)</div>
                 </div>`;
-        const link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = './dist/popover.css';
-        shadowRoot.prepend(link);
         document.getElementById('crossTreeToggle').popoverTargetElement =
           shadowRoot.getElementById('shadowedPopover');
       </script>