| name | hax-webcomponent-dev |
| description | Develop HAX-capable web components using LitElement, DDD design system, and HAXSchema. Use when scaffolding new components, adding HAX editor support, auditing accessibility, or applying DDD tokens to elements in the webcomponents monorepo.
|
| version | 1.1.0 |
| license | Apache-2.0 |
| metadata | {"author":"haxtheweb","tags":["hax","webcomponents","lit","ddd","haxschema","accessibility"],"source":"create"} |
HAX Web Component Development
Develop HAX-capable web components using LitElement, DDD design system, and HAXSchema.
When to Use
- Scaffolding a new component in the webcomponents monorepo
- Adding or updating
haxProperties / demoSchema
- Auditing a component for DDD compliance or accessibility
- Refactoring legacy SimpleColors usage to DDD tokens
- Fixing build issues with HAXCMSLitElement themes
- Reviewing component JavaScript for Polymer parser compatibility
How It Works
- Scaffold: Always use
hax webcomponent my-element --y instead of manual creation. Do not create directories or files manually in the monorepo. (PRAW Rule E9Zioqke3Y0gdnWB08XQn8 — all new elements must use the hax webcomponent CLI command.)
- Import DDD: Use
import '@haxtheweb/d-d-d/d-d-d.js' and extend DDD directly (never DDD(LitElement)). With mixins, DDD must be the base class: class MyEl extends SomeMixin(DDD) {}. (PRAW Rule iECnaDh0aVeeCYp0oydSht)
- Implement HAXSchema: Add
haxProperties() with demoSchema for editor examples. Use demoSchema and HAX helper methods to create valid demos with appropriate tag names, properties, and slotted content. (PRAW Rule rVsCTSDjae8lRmsJmPO3Mk)
- Style with DDD: Use
ddd- prefixed CSS custom properties for spacing, colors, typography, and icon sizes. Only use SimpleColors where explicitly needed as fallback. (PRAW Rules MLhl56jNSqHvnRiAW5A2GR, K0lV6BJOPrqP7iJMZkemUw)
- Audit: Check DDD token usage, ARIA attributes, keyboard navigation, semantic HTML, and dark mode compliance. (PRAW Rules
MT6HPJ9BDhA13jwSXjcmeA, 7CPveFErpSF0aZ8tKqxw0Y, 9iCZsjJ8USi5kuZph4T9Lk)
- Build: Run
yarn run build after changes to HAXCMSLitElement themes. Do not manually edit custom-elements.json — it is auto-generated. (PRAW Rule cfypZRDQLaJ6XsXtEaveWT)
JavaScript Standards
- Use
globalThis instead of window for global references (PRAW Rule CEHsAztyfB2vTCwtHGGnbk)
- Do not use optional chaining (
?.) — the Polymer parser has issues with this syntax (PRAW Rules hKN16ZhzB6OXTED2CkB3yP, nJF4SYUGdN5Wr5tEvaDtGY)
- Use single quotes, avoid semicolons where possible, prefer functional patterns
- Use Prettier for consistent formatting
- No TypeScript — pure JavaScript with LitElement
- When using third-party libraries, import the pre-compiled JavaScript distribution
Component Audits
When working on any component, perform these checks:
- DDD Design System: Verify proper usage of design tokens
- Accessibility: Check ARIA attributes, keyboard navigation, semantic markup
- HAX Schema: Ensure complete and accurate haxProperties implementation
- Performance: Review bundle size, lazy loading opportunities
- Browser Compatibility: Test across supported browser versions
References
- HAX CLI:
hax webcomponent --help
- DDD element:
webcomponents/elements/d-d-d
- PRAW RULES.md:
~/Documents/git/haxtheweb/praw/RULES.md (canonical ecosystem rules referenced by Rule ID)
- DDD design system: see the
hax-design-system skill
