Create Component (custom-element & slot) with lit-element

LitElementLight.ts

import {LitElement} from 'lit-element';

class LitElementLight extends LitElement {
    slotMap: object;

    connectedCallback() {
        this.slotMap = Array
            .from(this.renderRoot.querySelectorAll('[slot]'))
            .reduce((map, obj) => ({
                ...map,
                [obj.getAttribute('slot')]: obj
            }), {});

        super.connectedCallback();
    }

    protected getSlot(slotName: string): ChildNode {
        return this.slotMap && this.slotMap[slotName];
    }

    createRenderRoot() {
        return this;
    }
}

export {
    LitElementLight
};

test.html

<test-light>
  <div slot="actions">
    <button type="button" class="btn btn-primary" (click)="toggleImage()">Angular Action</button>
    <button type="button" class="btn btn-secondary" v-on:click="counter += 1">VueJS Action</button>
  </div>
</test-light>

TestLight.ts

@customElement('test-light')
class TestLight extends LitElementLight {
    render() {
        return html`
            <div>LitElement content bla...</div>
            <div>${this.getSlot('actions')}</div>
            <div>Styling is global</div>
    `;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'test-light': TestLight;
    }
}