Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform
Custom Elements Usage
```
// via JavaScript
document.createElement('date-picker');
document.createElement('input', { is: 'date-picker' });
Slide 32
Slide 32 text
Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform
Custom Elements
Attributes vs Properties
Slide 33
Slide 33 text
Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform
Custom Elements Attributes
• Allows you to pass information to the component
• Only supports “simple” data
Slide 34
Slide 34 text
Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform
Custom Elements Properties
• Access via JavaScript
• Typically reflected back into attributes but doesn't
have to
• Supports complex data (arrays, objects, etc.)
const el = document.querySelector('date-picker');
el.value = 99;
el.disabled = false;
el.range = ['2018-01-01', '2019-01-01'];
Slide 35
Slide 35 text
Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform
Custom Elements Properties
class DatePicker extends HTMLElement {
// ...
get disabled() {
return this.hasAttribute('disabled');
}
set disabled(val) {
// Reflect the value of `disabled` as an attribute.
if (val) {
this.setAttribute('disabled', '');
} else {
this.removeAttribute('disabled');
}
}
// ...
}
Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform
Extensible Web Manifesto
• The standards process should focus on adding
new low-level capabilities to the web platform that
are secure and efficient
• The web platform should expose low-level
capabilities that explain existing features, such as
HTML and CSS, allowing authors to understand
and replicate them.
Slide 58
Slide 58 text
Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform
How The Web Sausage Gets Made
by Monica Dinculescu (@notwaldorf)
youtube.com/watch?v=326SIMmRjc8
Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform
About LitElement
• Written by the Polymer Team
• “A simple base class for creating custom elements
rendered with lit-html”
• Uses web standards (no compilation)*
• lit-html is powered by HTML templates
*Except module bundling
https: //github.com/Polymer/lit-element
Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform
Stencil
• Stencil was written by the Ionic Team
• “compiler that generates web components”
• Built to bring Ionic to more frameworks than Angular
• Inspired by Angular, React and others
• Uses TypeScript, decorators, and JSX
https: //stenciljs.com
Slide 72
Slide 72 text
Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform
Summary
Photo by Jan Kahánek on Unsplash
Slide 73
Slide 73 text
Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform
Web Components
for any shared UI
Think about
Slide 74
Slide 74 text
Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform
Web Components
won’t limit
your framework choices
Slide 75
Slide 75 text
Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform
Pick Your Favorite…
Let Others Pick Theirs!
and