diff --git a/demo/style-inheritance.html b/demo/style-inheritance.html new file mode 100644 index 0000000..8f68bcf --- /dev/null +++ b/demo/style-inheritance.html @@ -0,0 +1,407 @@ + + + + + + Style Inheritance Demo - Tabbed Interface + + + + +
+

Style Inheritance Demo

+

+ This page demonstrates how the tabbed interface now supports + style inheritance through the shadow DOM boundary using CSS + custom properties and inherited properties. +

+
+ +
+ +
+

Example 1: Inherited Properties

+

+ Properties like color and + font-family naturally inherit through shadow + DOM boundaries. The component now properly passes these + through to tab panel content. +

+ +
+ +

Welcome

+

+ This text inherits the white color from the parent + .hero div. +

+

+ The gradient background is on the parent, and the + text color flows through the shadow DOM boundary. +

+ +

Features

+
    +
  • Color inheritance works seamlessly
    • +
  • Font family is inherited from parent
    • +
  • + Text maintains the same styling as the + surrounding context +
    • +
  • No special configuration needed!
    • +
+ +

How It Works

+

+ The component uses color: inherit on + both :host and + [role="tabpanel"]. +

+

+ This allows inherited CSS properties to flow through + the shadow DOM boundary naturally. +

+ +
+ +
+ Key Insight: The white text you see in the + tabs above is inherited from the parent .hero div, not set + directly on the component. This is exactly what the bug + report requested! +
+
+ + +
+

Example 2: CSS Custom Properties

+

+ The component now implements all documented CSS custom + properties, allowing you to customize the appearance without + piercing the shadow DOM. +

+ +
+ +

Dark Theme

+

+ This tabbed interface uses CSS custom properties to + achieve a dark theme with red accents. +

+

+ The text color (dark gray) is inherited from the + parent element. +

+ +

Customization

+

All styling is done with CSS custom properties:

+
    +
  • + --tabbed-interface-tab-background +
    • +
  • + --tabbed-interface-tab-active-background +
    • +
  • + --tabbed-interface-tabpanel-padding +
    • +
  • And many more!
    • +
+ +

Benefits

+

+ Using CSS custom properties allows for complete + customization while respecting the component + boundary. +

+ +
+
+ + +
+

Example 3: Typography Inheritance

+

+ Font family and size are inherited, allowing the component + to adapt to different typographic contexts. +

+ +
+ +

Typography

+

+ This example uses Georgia serif font, inherited from + the parent container. The font family flows through + to all text within the tabbed interface. +

+

+ Line height and font size are also inherited, + ensuring consistent typography throughout. +

+ +

Readability

+

+ Proper typography inheritance ensures that your + content maintains its intended readability and + aesthetic, regardless of where it's placed. +

+

+ The component adapts to your design system rather + than imposing its own styles. +

+ +

Design Systems

+

+ This makes the component perfect for use in design + systems where consistent typography is essential. +

+ +
+
+ + +
+

Example 4: VS Code Dark Theme

+

+ A practical example showing how the component can adapt to a + code editor aesthetic. +

+ +
+ +

JavaScript

+

const message = 'Hello World';

+

console.log(message);

+

// This code uses VS Code dark theme colors

+ +

CSS

+

.container {

+

  display: flex;

+

  color: inherit;

+

}

+ +

HTML

+

<div class="container">

+

  <p>Content here</p>

+

</div>

+ +
+
+ + +
+

Before vs After

+ +
+
+

❌ Before (Browser Defaults)

+

+ Issue: Content lost its styling + when wrapped in a tabpanel +

+
    +
  • Text reverted to black (#000)
    • +
  • Font family reset to browser default
    • +
  • Custom backgrounds lost
    • +
  • Design system styles not applied
    • +
+
+ +
+

✅ After (With Inheritance)

+

Fixed: Styles properly inherited

+
    +
  • Text color inherited from parent
    • +
  • Font family preserved
    • +
  • Typography maintained
    • +
  • CSS custom properties work
    • +
+
+
+
+ + +
+

Technical Implementation

+ +
+ What Changed: +
    +
  • + Added color: inherit to + :host element +
    • +
  • + Added color: inherit to + [role="tabpanel"] +
    • +
  • + Implemented all documented CSS custom properties +
    • +
  • + Properties can now be customized with + var(--tabbed-interface-*) +
    • +
+
+ +

Available CSS Custom Properties

+ +
+
+ + + + + + diff --git a/package-lock.json b/package-lock.json index 9e1928a..dc7b048 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,7 @@ "vitest": "^4.0.10" }, "engines": { - "node": ">=14.0.0" + "node": ">=20.0.0" } }, "node_modules/@babel/code-frame": { diff --git a/tabbed-interface.js b/tabbed-interface.js index d1f6668..0ea875c 100644 --- a/tabbed-interface.js +++ b/tabbed-interface.js @@ -258,16 +258,18 @@ export class TabbedInterfaceElement extends HTMLElement {