joicomponents

Design patterns to build native web components

Usage no npm install needed!

<script type="module">
  import joicomponents from 'https://cdn.skypack.dev/joicomponents';
</script>

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?

  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
  1. 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