Elements
What is a custom element?
<a href=''></a>
<button>click me!</button>
<label>a label</label>
<input type='text' value='' />
<img src='./img.png'/>
<iframe src='http://www.google.com'></iframe>
<!-- many many more -->
HTML5 Elements
<awesome-element>trust me, it's awesome.</awesome-element>
?
The gist of it...
<script>
let template = document.querySelector('#your-component');
class YourComponent extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(template.content.cloneNode(true));
}
}
customElements.define('your-component', YourComponent);
</script>
<template id="your-component">
<p>I'm in Shadow DOM.</p>
</template>
<style>
/* place your styles here */
</style>
- Attribute Reflection
- attributeChangedCallback()
- CUSTOM_ELEMENTS_SCHEMA
- Create a build
- Import polyfills
- TypeScript config: allowJS
- phantomJS
- es5-shim?
- more...
More to learn/configure...
Build
gulp.task('inline-resources', () => {
return gulp
.src(`${tmpFolder}/switcher/switcher.component.ts`)
.pipe(
replace(/(template\.innerHTML = `)(`;)/, (match, p1, p2) => {
const html = fs
.readFileSync(`${tmpFolder}/switcher/switcher.component.html`)
.toString()
.trim();
const cssResult = sass.renderSync({
file: `${tmpFolder}/switcher/switcher.component.scss`
}).css;
return `${p1}
<style>${cssResult.toString()}</style>
${html}
${p2}`;
})
)
.pipe(gulp.dest(`${tmpFolder}/switcher/`));
});
Why do we care?
Angular Elements!
- component -> custom element
- angular-cli
- createCustomElement
Why?
- tech stack interoperability
- already angular shop
- organization legacy
- frontend libraries ever changing
- less deployment process
Requirements
- Angular 6+
- ng add @angular/elements
- an http server
yarn add http-server --dev
Demo
thanks!
questions?
References
https://developers.google.com/web/fundamentals/web-components
https://medium.com/@tomsu/building-web-components-with-angular-elements-746cd2a38d5b
https://www.webcomponents.org
Angular Elements!
By ianqueue
