! Custom Elements Attributes
• Allows you to pass information to the component
• Only supports "simple" data
Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
Slide 34
Slide 34 text
! Custom Elements Properties
const el = document.querySelector('date-picker');
el.value = 99;
el.disabled = false;
el.range = ['2018-01-01', '2019-01-01'];
• Access via JavaScript
• Typically reflected back into attributes but doesn't have to
• Supports complex data (arrays, objects, etc.)
Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
Slide 35
Slide 35 text
! 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 | #s2techsession #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.
Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
Slide 58
Slide 58 text
! "
How The Web Sausage Gets Made
by Monica Dinculescu (@notwaldorf)
youtube.com/watch?v=326SIMmRjc8
Dominik Kundel | @dkundel | #s2techsession #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
• ! https://github.com/Polymer/lit-element
* Except module bundling
Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
!
What about
Stencil
Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
Slide 71
Slide 71 text
! What about 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
• ! stenciljs.com
Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
Slide 72
Slide 72 text
!
Let's use a web component!
Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform