ShadowComponent Documentation

<shadow-import>

Web Components for the rest of us.

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);
    };
});

Examples