• Success Criterion 1.4.12
  • Conformance level AA

Web Component Style That Blocks User Text-Spacing Overrides

1.4.12 — Text Spacing

Scenario

Setting

A podcast app's episode list

What’s wrong

Web-component shadow DOM (hidden internal code) styles that user stylesheets can't reach while content clips.

Example 

class EpisodeCard extends HTMLElement {
  connectedCallback() {
    this.attachShadow({mode: 'open'}).innerHTML =
      '<style>p{line-height:1.2;height:40px;overflow:hidden}</style><p>' + this.textContent + '</p>';
  }
}

Why it matters

The episode description's line-height and height are locked inside the shadow DOM, so a listener's user stylesheet can't reach it, and text clips regardless of their settings.

How to test

Apply a user stylesheet with the text-spacing override to a web component: if its shadow DOM styles block the override from reaching the internal text, it fails.

How to fix

Expose spacing-related values as CSS custom properties so they can inherit or be overridden from outside the shadow boundary.

p { line-height: var(--line-height, 1.5); height: auto; overflow: visible; }
:host { --line-height: 1.5; }

Outcome

A listener's personal spacing stylesheet now reaches the episode description instead of being blocked at the component boundary.

Who is affected

Listeners who rely on a custom stylesheet for spacing get no benefit at all inside this self-contained component.

Learn more

Related scenarios