"Web component design patterns" are recipes for simple and reusable web components. All patterns run natively in any browser that supports web components and vanilla es6.
If you have your own use cases, problems, patterns and/or solutions, please let us know!
- Intro: Web components
- HowTo: CreateElement
- HowTo: CreateShadowDom
- HowTo: CloseShadowDOM
- WhatIs: Upgrade
- Pattern: TemplateSwitcheroo
- HowTo: attributeChangedCallback
- Pattern: TheEnd
- Anti-pattern: TwoConstructors
- RulesOfThumb for web components
- What is: shadowDOM
- HowTo:
<slot>
- HowTo: name
<slot>
- HowTo:
<slot>
fallback nodes - HowTo:
.assignedNodes()
- Pattern: style
<slot>
- Pattern:
::slotted(*)
- HowTo: chain slots
- Problem: SlotMatroska
- Problem: SlotStyleCreep
- Problem: FallbackNodesFallout
- Problem: FlattenTrueIsFalse
- Problem: NoFallbackSlotchange
- Problem: SlotchangeSurprise
- Theory: DomNodesAndBranch
- Problem: PrematureSlotchange
- Problem: SlotchangeNipSlip
- Theory: VariableExpectations
- Pattern: NaiveSlotCallback
- Pattern: MySlotCallback
- Pattern: SlotCallbackAfterDCL
- Pattern: PostSlotchangeCallback
- Pattern: SlotchangeCallback
- Pattern: SlotChildCallback
- Pattern: SlottablesEvent
- Pattern: SlottablesCallback
- Intro: Style_in_web_comps
- HowTo: shadowStyle
- Problem: ThisStyleIsNotMyStyle
- HowTo: HostWithStyle
- HowTo: CssVariables
- Pattern: CssCoordinatorClass
- Pattern: CssCoordinatorAttribute
- Pattern: StyleCoordinatorAttribute
- Pattern: NaiveStyleCallback
- Mixin: NaiveStyleCallback
- HowTo: TraverseTheCssom
- Pattern: TreeOrderedCssomTraversal
- Mixin: StyleCallback
- Test: StyleCallback
- HowTo: ReactToLayout
- Pattern: MediaQueryAttribute
- Pattern: ResizeAttribute
- Pattern: ResponsiveElement
- Problem: DOM_folding
- Pattern: NaiveLayoutAttributes
- Pattern: LayoutAttributes
- Pattern: JsonAttributes
- Pattern: StubbornAttribute
- Introduction: HTML is list
- FosterParentChild (
<ul-li>
) - HelicopterParentChild (
<ol>+<li>
) - CulDeSacElements (
<img>
) - MiniMeDOM (make the index in
<the-book>+<a-chapter>
) - Pattern: JSONAttributes
- Discussion: HTML composition