Fix ShadowRootWithPart story

chromaui · May 2, 2024 · a8f0437 · a8f0437
1 parent 563a384
commit a8f0437
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 27 deletions.
diff --git a/stories/ShadowRootWithPart.css b/stories/ShadowRootWithPart.css
@@ -0,0 +1,23 @@
+::part(foo) {
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+  color: white;
+  background-color: tomato;
+  font-size: 14px;
+  padding: 11px 20px;
+}
+::part(foo):hover {
+  text-decoration: underline;
+}
+::part(foo):focus {
+  box-shadow: inset 0 0 0 2px maroon;
+  outline: 0;
+}
+::part(foo):active {
+  background-color: firebrick;
+}
diff --git a/stories/ShadowRootWithPart.js b/stories/ShadowRootWithPart.js
@@ -1,4 +1,5 @@
 import React from "react"
+import "./ShadowRootWithPart.css"
 
 export const ShadowRoot = ({ label = "Hello from shadow DOM" }) => {
   const ref = React.useRef()
@@ -9,33 +10,6 @@ export const ShadowRoot = ({ label = "Hello from shadow DOM" }) => {
     ref.current.shadowRoot.innerHTML = `
       <button part="foo">${label}</button>
     `
-    ref.current.innerHTML = `
-      <style>
-        ::part(foo) {
-          font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-          font-weight: 700;
-          border: 0;
-          border-radius: 3em;
-          cursor: pointer;
-          display: inline-block;
-          line-height: 1;
-          color: white;
-          background-color: tomato;
-          font-size: 14px;
-          padding: 11px 20px;
-        }
-        ::part(foo):hover {
-          text-decoration: underline;
-        }
-        ::part(foo):focus {
-          box-shadow: inset 0 0 0 2px maroon;
-          outline: 0;
-        }
-        ::part(foo):active {
-          background-color: firebrick;
-        }
-      </style>
-    `
   }, [])
 
   return <div ref={ref} />