const inject_inline = require('gulp-inject-inline');
 
gulp.task('inject:css', () => {
    gulp.src("src/components/**/*.js")
        .pipe(inject_inline())
        .pipe(gulp.dest("dist/components"));
});

export class MyComponent extends HTMLElement {
    private shadow: DocumentFragment;
 
    /* CSS */
    private static styles: string = `
        [ inject-inline myComponent.css ]
    `;
 
    constructor() {
        super();
        /* Attach shadow root */
        this.shadow = this.attachShadow({mode: 'open'});
 
        /* Add the styling to the page */
        const style = document.createElement('style');
        style.innerHTML = MyComponent.styles;
        this.shadow.appendChild(style);
    }
}
 
window.customElements.define("my-component", MyComponent);

export class MyComponent extends HTMLElement {
    private shadow: DocumentFragment;
 
    /* CSS */
    private static styles: string = `
        :host {
    width: 150px;
    height: 200px;
    display: block;
}
 
h1 {
    color: #FFF;
}
    `;
 
    constructor() {
        super();
        /* Attach shadow root */
        this.shadow = this.attachShadow({mode: 'open'});
 
        /* Add the styling to the page */
        const style = document.createElement('style');
        style.innerHTML = MyComponent.styles;
        this.shadow.appendChild(style);
    }
}
 
window.customElements.define("my-component", MyComponent);