@framejs/mixins/dist/lib/mixins/shady-css.mixin.js

A set of mixing to help and speed up development of web components

import { applyShadyCSS } from '../utils/apply-shady-css';
/**
 * ShadyCSSMixins applies ShadyCSS to the template if it's available
 * in global window to support unsupported browsers.
 *
 * @mixin
 * @example
 * class MyClass extends ShadyCSSMixin implements ShadyCSSMixin {
 *     static get is() {
 *         return 'my-class'
 *     }
 *
 *     render() {
 *         return `
 *             <style>:host { color: blue} </style>
 *             <slot></slot>
 *         `;
 *     }
 * }
 */
export const ShadyCSSMixin = (Base = HTMLElement) => {
    return class extends Base {
        constructor() {
            super();
            this._template = document.createElement('template');
            this._template.innerHTML = this.render();
            applyShadyCSS(this._template, this.constructor.is);
            this.attachShadow({ mode: 'open' }).appendChild(this._template.content.cloneNode(true));
        }
    };
};