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?

1. Intro: Web components
2. HowTo: CreateElement
3. HowTo: CreateShadowDom
4. HowTo: CloseShadowDOM
5. WhatIs: Upgrade
6. Pattern: TemplateSwitcheroo
7. HowTo: attributeChangedCallback
8. Pattern: TheEnd
9. Anti-pattern: TwoConstructors
10. RulesOfThumb for web components

Chapter 2: ShadowDOM

1. What is: shadowDOM
2. HowTo: <slot>
3. HowTo: name <slot>
4. HowTo: <slot> fallback nodes
5. HowTo: .assignedNodes()
6. Pattern: style <slot>
7. Pattern: ::slotted(*)

Chapter 3: SlotMatroska

1. HowTo: chain slots
2. Problem: SlotMatroska
3. Problem: SlotStyleCreep
4. Problem: FallbackNodesFallout
5. Problem: FlattenTrueIsFalse
6. Problem: NoFallbackSlotchange
7. Problem: SlotchangeSurprise
8. Theory: DomNodesAndBranch
9. Problem: PrematureSlotchange
10. Problem: SlotchangeNipSlip
11. Theory: VariableExpectations

Chapter 4: slotCallback(..)

1. Pattern: NaiveSlotCallback
2. Pattern: MySlotCallback
3. Pattern: SlotCallbackAfterDCL
4. Pattern: PostSlotchangeCallback
5. Pattern: SlotchangeCallback
6. Pattern: SlotChildCallback
7. Pattern: SlottablesEvent
8. Pattern: SlottablesCallback

9. Pattern: FalloutFix

Chapter 5: Style

1. Intro: Style_in_web_comps
2. HowTo: shadowStyle
3. Problem: ThisStyleIsNotMyStyle
4. HowTo: HostWithStyle
5. HowTo: CssVariables
6. Pattern: CssCoordinatorClass
7. Pattern: CssCoordinatorAttribute
8. Pattern: StyleCoordinatorAttribute
9. Pattern: NaiveStyleCallback
10. Mixin: NaiveStyleCallback
11. HowTo: TraverseTheCssom
12. Pattern: TreeOrderedCssomTraversal
13. Mixin: StyleCallback
14. Test: StyleCallback

Chapter 6: Layout

1. HowTo: ReactToLayout
2. Pattern: MediaQueryAttribute
3. Pattern: ResizeAttribute
4. Pattern: ResponsiveElement
5. Problem: DOM_folding
6. Pattern: NaiveLayoutAttributes
7. Pattern: LayoutAttributes

Chapter 7: HTML Composition

1. Pattern: JsonAttributes
2. Pattern: StubbornAttribute
3. Introduction: HTML is list
4. FosterParentChild (<ul-li>)
5. HelicopterParentChild (<ol>+<li>)
6. CulDeSacElements (<img>)
7. MiniMeDOM (make the index in <the-book>+<a-chapter>)
8. Pattern: JSONAttributes
9. Discussion: HTML composition

Chapter 8: Mixins

1. Reactive method
2. Isolated functional mixin
3. StaticSetting
4. EventRecording
5. DebounceCallbacks
6. OptionalCallbacksEvents
7. PrivateSymobl
8. MixinSingletons
9. Discussion: isolate FunctionalMixins

Chapter 9: Polyfill web components

1. Introduction: What's a polyfill?
2. FeatureDetection
3. Dynamically loading scripts
4. FeatureDetectAndPolyfill
5. Batch calls to customElements polyfill
6. QueAndRecallFunctions
7. SuperFun
8. Polyfill loader
9. Polyfill loader generator
10. Sync vs async polyfills
11. Webcomponentsjs