Web Components
&
<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>
attributeChangedCallback(attributeName, oldValue, newValue)
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/`));
});
Add a es5 shim to your project via .angular-cli.json (https://github.com/angular/angular-cli/wiki/stories-global-scripts)
"scripts": [
"../node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
]
Add a webcomponent polyfill to your polyfills.ts file for cross browser compatability IE etc.
@NgModule({
declarations: [
YourWebComponent,
],
exports: [
YourWebComponent,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class YourWebModule { }
Don't add CUSOM_ELEMENTS_SCHEMA to main app module!
Our build is a glorified UMD (Universal Module Definition) bundler!
References
https://developers.google.com/web/fundamentals/web-components
https://www.webcomponents.org