Web components Identifier: Pre-alpha

[amyleadem]

Summary

• Design a markup structure for the light and shadow DOM
• Design component variants, props, parts, slots, and vars

Research and planning tasks

• Gather code samples from the landscape
  • Note: Use the Landscape analysis code samples template to collect relevant code samples from across the landscape
• Identify and document the component’s critical content
  • Document the component content that is critical for end-user understanding. Note: This critical content should always appear on the page, even in non-JS environments.
• Design and document the structure for the light DOM
• Design and document the structure for the shadow DOM
• Design and document the expected component customization methods
  • List and define the proposed component variants
  • List and define props
  • List and define slots
  • List and define CSS Parts
  • List and define CSS Variables
  • List any component content that will need to be translated into other languages

[amyleadem]

Identifier component design plan

Landscape analysis

Identifier code samples from the landscape analysis (Google docs 🔒)

Proposed component structure

Critical content

Element	Required attributes	Content

Sample default implementation:

Shadow DOM

Variants

Current variants

USWDS 3 variant	Web components variant	Description	Defined via

Proposed additional variants

USWDS 3 variant	Web components variant	Description	Defined via

Props

Current variants

Property	Description	Expected values

Proposed additional variants

Property	Description	Expected values

Slots

Unnamed slot

CSS Parts

Part name	Element

CSS Variables

Current settings

USWDS 3 setting	CSS custom property	Description

Proposed additional setting

USWDS 3 setting	CSS custom property	Description

Translatable content