Reusable UI with Web Components
slides.com/aelbore
Arjay Elbore
Frontend Developer
github.com/aelbore
Aivan Monceller
Frontend Developer
github.com/geocine
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle"
type="button" id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<b-dropdown label="Dropdown">
<b-dropdown-item>Action</b-dropdown-item>
<b-dropdown-item>Another Action</b-dropdown-item>
<b-dropdown-item>Something Else here</b-dropdown-item>
</b-dropdown>Web Components
set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
Custom Elements
Shadow DOM
HTML Template
ES Modules
Shadow DOM
Advantages of Web Components
- Developer Experience
- You want to speed up development
- Less code
- Easy to maintain
- Can use to any javascript framework or libraries
- Consistency
- Reuse components across teams, other projects/environments/frameworks
- Encouraging all of your engineers to reuse components will make the site more enjoyable for its users
Browser Support
Demo
- LitElement - A simple base class for creating fast, lightweight web components
- CSS Custom Properties - variables in CSS
- Parcel - Blazing fast, zero configuration web application bundler
https://github.com/geocine/theme-toggler-demo
<thank-you></thank-you>
Reusable UI with Web Components
By aelbore
