PickCodeExpand the #shadow-root node in the Elements panel, select the inner element, and read its rules in Styles; they come from a <style> tag or adopted stylesheet inside that shadow root, not the page's CSS. Copy those rules together with the component's markup, because they are scoped to the shadow root and will not apply anywhere else.
Why normal copying misses them
A web component keeps its markup and CSS in a shadow root. Page stylesheets don't reach inside, and the component's styles don't leak out. When you inspect the component from the outside, you see the host element, such as <my-button>, and none of the inner styling.
Only a few things cross the boundary: inherited properties like color and font, CSS custom properties, and parts the author exposed with part="...".
Copy them in DevTools
- Inspect the component and expand
#shadow-root (open)under the host. DevTools shows closed roots too. - Select the inner element you want. Styles lists the rules from inside the shadow root, plus
:hostrules. - Copy the inner markup and its rules. Replace
:hostwith a class on your wrapper. - Note any
var(--...)values and copy their definitions from the host or page.
If you only need to restyle the component in your own app, use what it exposes instead of copying:
my-button::part(label) {
font-weight: 600;
}
my-button {
--button-bg: #4f46e5;
}Where PickCode stands
PickCode selects the host element of a web component and does not read inside shadow roots yet, so for these components the DevTools steps above are the reliable way. For sites with random class names from CSS-in-JS or CSS modules, which is a different problem, PickCode works well because it reads computed styles; see the CSS-in-JS guide.
Full walkthrough: CSS-in-JS sites
Questions
Can I copy from a closed shadow root?
DevTools shows closed shadow roots, so you can read and copy the styles by hand. Page scripts and extensions can't reach into them.
Why does getComputedStyle work on the inner element but my copy still looks wrong?
Computed values on one element do not include the shadow root's other rules, slots or :host styles. Copy the whole component's markup and styles.
Can I use the component itself instead?
Often yes. Many web components are published on npm under an open license. Check the license and install it rather than copying.