CSS inherited from global CSS to shadow dom my default: (discussion with chatGpt)

Query:

what r things that will be inheraed from global css inside :root? I hv seen tillnow color-scheme: dark; is inherited. What else?

ChatGPT said:

Great question — this is a core part of CSS + Shadow DOM behavior.

Shadow DOM does NOT inherit global CSS rules, but it DOES inherit inheritable CSS properties, meaning specific CSS properties whose values pass from parent → child automatically, including across shadow boundaries.

color-scheme: dark works because it is inheritable.

---

✅ List of CSS properties that DO inherit into Shadow DOM

Below are the major categories of inheritable CSS properties.

---

🎨 1. Text & Font Properties (inherited by default)

These WILL enter shadow DOM:

Property	Inherited?
color	✔ inherits
font, font-family, font-size, font-weight, font-style	✔
line-height	✔
text-align, text-indent	✔
white-space	✔
letter-spacing, word-spacing	✔
text-transform	✔
text-shadow	✔
text-rendering	✔

So if in your global CSS:

:root {
    font-family: Inter, sans-serif;
    color: #eee;
}

Your shadow DOM automatically inherits the font + color.

---

🧭 2. Directionality & Writing Modes

Property	Inherited?
direction (ltr/rtl)	✔
writing-mode	✔

---

🌙 3. Color Scheme

Property	Inherited?
color-scheme: dark	✔

This is why your shadow DOM switches automatically to dark mode.

---

🎨 4. List Styling Properties

Property	Inherited?
list-style, list-style-type, list-style-position	✔
list-style-image	✔

---

🖼 5. Quotes

Property	Inherited?
quotes	✔

---

✒️ 6. Cursor?

❌ NOT inherited
That’s why your button inside shadow root ignores global cursor styling.

Same for many UI-related styles.

---

🚫 Properties NOT inherited (Shadow DOM won’t see them)

Category	Examples
Layout	display, margin, padding, position, grid, flex
Box model	border, background, width, height
Interaction	cursor, pointer-events
Visual effects	box-shadow, opacity, filter

These never pass from document → shadow DOM, even if applied in :root.

---

🧠 Why inheritable properties pass through shadow boundaries

CSS inheritance works through computed style, and the spec says:

"Shadow DOM elements inherit inheritable CSS properties from the host element."

So the custom element itself must have the inherited value, then its shadow children inherit from the host.

---

🧪 Example

Global CSS:

:root {
    color: white;
    font-size: 18px;
    background: black;   /* not inherited */
    cursor: pointer;     /* not inherited */
}

Inside shadow DOM:

• <p> → inherits color + font-size

• <button> → will NOT inherit cursor, background.

---

⭐ Final Summary

✔ Properties inherited inside shadow DOM:

• text + font properties

• color

• line-height

• direction

• writing-mode

• color-scheme

• list-style properties

• quotes

❌ Properties NOT inherited:

• cursor

• background

• border

• layout

• spacing

• shadows

• pointer-events

• positioning

• sizing

• display / flex / grid

---

If you want, I can generate a complete reference table of all inheritable CSS properties recognized by browsers.