LogoClawIndex
CasesSkillsAbout
LogoClawIndex

web-components - Build reusable components with Web Components

Creates framework-agnostic custom HTML elements with Custom Elements, Shadow DOM, templates, slots, and related browser APIs.

Tags

Updated: 2026-10-02
web componentscustom elementsshadow DOMHTML componentsdesign systems

Capabilities

Define custom elementsExtend built-in elementsEncapsulate DOM and stylesCompose templates and slots

Typical Inputs

Component markupElement attributesTemplate content

Typical Outputs

Custom HTML elementsEncapsulated component DOMScoped component styles

What this skill does

  • Define custom elements
  • Extend built-in elements
  • Encapsulate DOM and styles
  • Compose templates and slots
  • Reflect properties and attributes
  • Associate elements with forms
  • Expose CSS styling hooks
  • Apply theme variables

Inputs

  • Component markup
  • Element attributes
  • Template content
  • Slot content
  • Theme variables
  • External CSS

Outputs

  • Custom HTML elements
  • Encapsulated component DOM
  • Scoped component styles
  • Reactive component behavior
  • Form-associated elements

Requirements

    Source

    • Spec: SKILL.md

    ClawIndex

    OpenClaw Skills & Use Case Index

    ClawIndex is an ecosystem-driven index of OpenClaw skills and real-world use cases.

    Index

    Skills·
    Cases

    Meta

    About·
    Disclaimer·
    Email·
    GitHub
    © 2026 ClawIndex All Rights Reserved.