Prerelease, Promise, and Pitfalls

Web Components Bona-Fides

  • Web Components stan account since 2015
  • Author of award-winning "Let's Build Web Components" series*
  • Apollo Elements, <stripe-elements>, etc.
  • Day job: Design Systems @ Red Hat
*Not actually award winning

11ty Bona-Fides

11ty at Work

Why we Like 11ty

๐Ÿ“ Standards-aligned
Build and preserve team skills
๐Ÿšš Portable
Any build environment, any web host
๐Ÿ’„ Deploy previews
Drastically better review workflow
๐Ÿ‘ Low barrier to entry
Design / developer collaboration

Why we Like Web Components

๐Ÿ“ Standards-aligned
Build and preserve Platform skills
๐Ÿšš Portable
Any framework, any backend
๐Ÿ’„ Save-and-reload
Drastically reduce tooling burden
๐ŸŒด Good-old HTML vibes
sudo dnf remove nodejs
  • Initially drawn in by the โ€œgood-old htmlโ€ vibes
  • ~ Polymer 3, Bower => npm, .html to .js
    • msg shifted: emphasis on html => emphasis on framework interop
    • Maybe that was a strategic mistake?
  • Apollo Elements - built to show off the framework interop aspect.
    • Chose GraphQL as a typically framework-centric space
    • Maybe this was also a mistake?
    • Anyways learned different frameworks from writing demos
  • But that project gave me experience with implementing the same patterns in multiple frameworks
  • So David East talk about njk shortcodes being the same as components. - resonated with my experience making apollo-elements.

When we first heard about WebC, it sounded like a slam-dunk.

  1. Component framework for 11ty
  2. Standards-aligned development
  3. A โœจ Zack Leatherman ๐Ÿ’ƒ joint

So: Whatโ€™s not to like?

So in this talk weโ€™re going to present some of our impressions of working with WebC, from the perspective of design system and web components engineers with a strong standards-aligned development ethos.

๐Ÿฅฆ Freshness

  • Low barrier to entry
  • Instant familiarity with HTML / CSS experience
  • Component mindframe โžก๏ธ Quick iteration
  • Brand-new WebC projects benefit from a low barrier to entry and immediate familiarity to anyone with some HTML and CSS experience.
  • Internal experiment: evaluate migrating a CMS site to 11ty/WebC
    • Designers and technical writers were able to quickly pick WebC up after a couple of short training sessions, and were quickly off and building.
  • Taken an existing CMS site which had its own raw HTML layouts
  • We identified repeating patterns, abstracted out webc layouts.
  • This was particularly good for layout components like card grid. We think that 11ty could have done this great with dsd / standard custom elements, even without clientside javascript to register the tag names
  • Most of our interactive bits or javascript parts were about reflecting attributes for css selectors, etc

๐Ÿฅฆ Freshness

  • Less intimidating than Nunjucks - fewer specialized syntax forms
  • Progressive learning path - builds on existing HTML knowledge
  • Works very similarly to HTML*
    • But itโ€™s not html: slots and templates.

    WebC is Prerelease Software

    npm info @11ty/webc version: 0.11.4
    • Changes are expected
    • Those changes have been and might again be breaking before 1.0

    โˆด WebC's current state and APIs are like a taste of what's to come

    ๐Ÿง€ Less-than-Fresh

    freeze frame of seinfeld clip: festivus airing of grievances

    Put critique in proper perspective

    And to understand where critique is coming from - the desire to use this

    ๐Ÿง€ Less-than-Fresh

    • WebC โ‰  Web Components
    • WebC <slot> โ‰  <slot> in HTML
    • WebC scoping โ‰  Shadow DOM
    • In some cases, data management is awkward

    What is a Web Component?

    Make-your-own HTML

    Custom Elements
    • (Currently) requires JavaScript
    • Progressive enhancement with :defined
    Shadow DOM
    • Does not require JavaScript
    • SSR with Declarative Shadow DOM

    Client-side upgrade (aka "hydration") via libraries

    Either or both, but not none


    HTML <slot> element
    Projects content into a shadow root
    WebC <slot> component
    Moves content from one place to another

    When writing WebC framework slots, doing basic things like card - slots are like layout, transclusion layout targets. That was easy to use, and it lines up with user expectations, and is very similar to how real shadow dom slots work

    Slots - Broken Platform Features

    • ::slotted
    • slot="named-slot"
    • Global CSS targeting content

    Can lead to Unintended consequences

    A Humble Suggestion: Disambiguation

    <slot webc:transclude

    Why not an alternative, opt in syntax, which layers server-side features on top of HTML? The specific syntax is less important, although we tend to prefer colon, which is illegal in real HTML, and thus safe for framework use


    When youโ€™re used to writing encapsulated shadow CSS, going back to global styles for component stuff is jarring. Steven Spriggs Senior UX Engineer

    WebC's style scoping, while fresh, doesn't take advantage of the platform's native scoping ability, Shadow DOM. Styles can collide.

    Data scoping

    • $data vs global scope
    • _components vs _includes
    • Ejecting to NJK or JS to assign names to data
    • 11ty:type=js semantics

    In general, WebC's data binding is pleasant enough to work with. Sticking points:

    Open Questions and Ideas

    • DSD Hydration and bundling
      • With Lit, etc. or without
    • Enterprise scale translations
      • in concert with CMSs?
    • Working with existing custom elements
      • Codegen WebC from CEM


    Adopt 11ty?
    Adopt WebC?
    Don't use web components?
    Ready to employ workarounds?
    Looking to FAFO?

    SFCs are nice. Fewer (but not none - b) helper functions (no need to context switch back up to 11y config)

    Prototype design system elements or patterns in WebC, and the migration path to custom elements will be easier later on. Another case: wrapping existing custom elements in WebC components.

    Templating features: custom elements with complex child elements (e.g. nav, tables, accordions) webcโ€™s templating is really useful

    Steveโ€™s takeaway: someone unfamiliar with real web components, wanting to componentize a site on the server, but without investing in a react metaframework. Great for cms content authors who are backed up by javascript developers

    Thank You!