README
Web component design patterns
The native web components cookbook
"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!
Chapter 1: How to make a web component?
- Intro: Web components
- HowTo: CreateElement
- HowTo: CreateShadowDom
- HowTo: CloseShadowDOM
- WhatIs: Upgrade
- Pattern: TemplateSwitcheroo
- HowTo: attributeChangedCallback
- Pattern: TheEnd
- Anti-pattern: TwoConstructors
- RulesOfThumb for web components
Chapter 2: ShadowDOM
- What is: shadowDOM
- HowTo:
<slot>
- HowTo: name
<slot>
- HowTo:
<slot>
fallback nodes - HowTo:
.assignedNodes()
- Pattern: style
<slot>
- Pattern:
::slotted(*)
Chapter 3: SlotMatroska
- HowTo: chain slots
- Problem: SlotMatroska
- Problem: SlotStyleCreep
- Problem: FallbackNodesFallout
- Problem: FlattenTrueIsFalse
- Problem: NoFallbackSlotchange
- Problem: SlotchangeSurprise
- Theory: DomNodesAndBranch
- Problem: PrematureSlotchange
- Problem: SlotchangeNipSlip
- Theory: VariableExpectations
slotCallback(..)
Chapter 4: - Pattern: NaiveSlotCallback
- Pattern: MySlotCallback
- Pattern: SlotCallbackAfterDCL
- Pattern: PostSlotchangeCallback
- Pattern: SlotchangeCallback
- Pattern: SlotChildCallback
- Pattern: SlottablesEvent
- Pattern: SlottablesCallback
Chapter 5: Style
- 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
Chapter 6: Layout
- HowTo: ReactToLayout
- Pattern: MediaQueryAttribute
- Pattern: ResizeAttribute
- Pattern: ResponsiveElement
- Problem: DOM_folding
- Pattern: NaiveLayoutAttributes
- Pattern: LayoutAttributes
Chapter 7: HTML Composition
- 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
Chapter 8: Mixins
- Reactive method
- Isolated functional mixin
- StaticSetting
- EventRecording
- DebounceCallbacks
- OptionalCallbacksEvents
- PrivateSymobl
- MixinSingletons
- Discussion: isolate FunctionalMixins