SlideShare a Scribd company logo
Using Web Components
Like a Boss
Burton Smith
@stuffbreaker
burton@breakstuff.io
Using Web Components like a Boss (web dev)
A. B. C.
Using Web Components like a Boss (web dev)
Using Web Components like a Boss (web dev)
Using Web Components like a Boss (web dev)
We should use web components!!!
DIC
THE
FRAMEWORK
Documentation
Integration
Communication
Custom Elements Manifest (CEM)
https://dev.to/stuffbreaker/you-should-be-shipping-a-manifest-with-your-web-components-2da0
Documentation
Integration
Communication
Documentation
•Interactive & sharable examples
•API details
Interactive & sharable examples
https://www.npmjs.com/package/code-bubble
Code Bubble
API Details https://www.npmjs.com/package/wc-dox
Documentation
Integration
Communication
IDEs
https://www.npmjs.com/package/custom-element-vs-code-integration
https://www.npmjs.com/package/custom-element-jet-brains-integration
WebStorm
Frameworks
JSX Integration
HTML Linting
Using Web Components like a Boss (web dev)
Lazy-Loading Components
Integrations
• https://www.npmjs.com/package/wc-storybook-helpers
• https://www.npmjs.com/package/custom-element-vs-code-integration
• https://www.npmjs.com/package/custom-element-jet-brains-integration
• https://www.npmjs.com/package/custom-element-solidjs-integration
• https://www.npmjs.com/package/custom-element-jsx-integration
• https://www.npmjs.com/package/custom-element-react-wrappers
• https://www.npmjs.com/package/custom-element-vuejs-integration
• https://www.npmjs.com/package/custom-element-svelte-integration
• https://www.npmjs.com/package/custom-element-lazy-loader
• https://www.npmjs.com/package/eslint-plugin-custom-element
Documentation
Integration
Communication
Using Web Components like a Boss (web dev)
DIC
Questions???
Using Web Components
Like a Boss
January 16, 2025
Burton Smith
@stuffbreaker
burton@breakstuff.io

More Related Content

PDF
Fullstack Web Components Complete Guide to Building UI Libraries with Web Com...
PPTX
Web Components: The Future of Web Development is Here
PDF
Lecture 11 - Web components
PPTX
[DevDay2019] The Evolvolution of Microservices and Web Component - By Ngo Thi...
PDF
Component Based Development
PPTX
Future proofing design work with Web components
PPTX
Web components and Package managers
PPTX
Web component
Fullstack Web Components Complete Guide to Building UI Libraries with Web Com...
Web Components: The Future of Web Development is Here
Lecture 11 - Web components
[DevDay2019] The Evolvolution of Microservices and Web Component - By Ngo Thi...
Component Based Development
Future proofing design work with Web components
Web components and Package managers
Web component

Similar to Using Web Components like a Boss (web dev) (20)

PDF
Web components - An Introduction
PDF
React for Non Techies
PDF
React for non techies
PPTX
Web components Introduction
PDF
The Complementarity of React and Web Components
PDF
React for non techies
PDF
Web components: A simpler and faster react
PPTX
Open Apereo - Web components workshop
PDF
Intro to React
PPTX
Progressive Web Apps and React
PPTX
Web Components: The Future of Web Development is Here
PDF
7 network programmability concepts python-ansible
PDF
Web component driven development
PDF
Content-Driven Apps with React
PDF
Components now!
PDF
Web Scale Reasoning and the LarKC Project
PPTX
Vuejs and Web components - current state
PPTX
The case for Web components - Drupal4Gov webinar
PDF
7 network programmability concepts api
PDF
7 network programmability concepts api
Web components - An Introduction
React for Non Techies
React for non techies
Web components Introduction
The Complementarity of React and Web Components
React for non techies
Web components: A simpler and faster react
Open Apereo - Web components workshop
Intro to React
Progressive Web Apps and React
Web Components: The Future of Web Development is Here
7 network programmability concepts python-ansible
Web component driven development
Content-Driven Apps with React
Components now!
Web Scale Reasoning and the LarKC Project
Vuejs and Web components - current state
The case for Web components - Drupal4Gov webinar
7 network programmability concepts api
7 network programmability concepts api
Ad

More from Burton Smith (7)

PPTX
web_components_workshop.pptx
PPTX
Front-End Columbus - Design Systems
PPTX
Building Design Systems - Columbus Web Group
PPTX
Building Design Systems
PPTX
Getting started with Vue.js - CodeMash 2020
PPTX
Design systems
PPTX
Up and Running Quickly with Vue.js
web_components_workshop.pptx
Front-End Columbus - Design Systems
Building Design Systems - Columbus Web Group
Building Design Systems
Getting started with Vue.js - CodeMash 2020
Design systems
Up and Running Quickly with Vue.js
Ad

Recently uploaded (20)

PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
DOCX
The AUB Centre for AI in Media Proposal.docx
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
A comparative analysis of optical character recognition models for extracting...
PPTX
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Electronic commerce courselecture one. Pdf
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PPTX
MYSQL Presentation for SQL database connectivity
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PDF
Empathic Computing: Creating Shared Understanding
PDF
MIND Revenue Release Quarter 2 2025 Press Release
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Review of recent advances in non-invasive hemoglobin estimation
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PPT
Teaching material agriculture food technology
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
The AUB Centre for AI in Media Proposal.docx
20250228 LYD VKU AI Blended-Learning.pptx
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
A comparative analysis of optical character recognition models for extracting...
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Electronic commerce courselecture one. Pdf
Advanced methodologies resolving dimensionality complications for autism neur...
Dropbox Q2 2025 Financial Results & Investor Presentation
MYSQL Presentation for SQL database connectivity
Diabetes mellitus diagnosis method based random forest with bat algorithm
Empathic Computing: Creating Shared Understanding
MIND Revenue Release Quarter 2 2025 Press Release
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Review of recent advances in non-invasive hemoglobin estimation
Digital-Transformation-Roadmap-for-Companies.pptx
Teaching material agriculture food technology

Using Web Components like a Boss (web dev)