Quick Start
<head>
<script src="shadow-import/polyfills/webcomponents.min.js"></script>
<script src="shadow-import/shadow-import.js"></script>
<shadow-import tag="tag-name" href="template-url"></shadow-import>
</head>
<body>
<tag-name></tag-name>
</body>
Creating a ShadowComponent
my-component/view.html (this is the template-url imported above)
<script src="component.js"></script>
<template>
<style>
:host {
/* add styles to the host tag here */
}
/* add all other styles for the HTML tag content here */
</style>
<!-- add HTML tag content here -->
</template>
my-component/component.js
ShadowComponent(function (cls, proto) {
proto.init = function () {
this.el.host; // refers to the host element (as imported, e.g.
// <tag-name></tag-name>)
this.el; // refers to the shadow root (contains the
// contents of <template></template>)
this.attrs; // manage attributes on the host element, usage:
// this.attrs.set(attrName, value)
// this.attrs.get(attrName, default)
// this.attrs.watch(attrName, function (newVal, oldVal) { ... })
this.content; // a DocumentFragment containing any content used in the tag,
// e.g. <tag-name><p>This content.</p></tag-name>
// To include this in your component, use:
// this.el.appendChild(this.content);
};
});