BindableProperty

src/components/bridge/index.ts

@@ -0,0 +1,41 @@
+import { html, customElement, TemplateResult, LitElement } from 'lit-element';
+import { TestText } from '../textcomponent';
+import { bindOn } from '../../tools/directives';
+
+@customElement('test-bridge')
+export class BridgeText extends LitElement {
+    textIn: TestText;
+
+    loaded: Promise<void>;
+    load: () => void;
+
+    constructor() {
+        super();
+        this.loaded = new Promise((resolv) => {
+            this.load = resolv;
+        });
+    }
+
+    firstUpdated(): void {
+        this.textIn = this.shadowRoot.querySelector('#inText');
+
+        this.load();
+    }
+
+    btnClick(): void {
+        this.textIn.textOut.next('Random');
+    }
+
+    public render(): TemplateResult {
+        return html`
+            <button @click="${this.btnClick}">Random</button>
+            <test-text id="inText"></test-text>
+            <test-textout
+                .text=${bindOn(() => this.textIn.textOut, this.loaded)}
+            ></test-textout>
+            <test-textout
+                .text=${bindOn(() => this.textIn.textOut, this.loaded)}
+            ></test-textout>
+        `;
+    }
+}

src/components/outputcomponent/index.ts

@@ -0,0 +1,16 @@
+import {
+    html,
+    property,
+    customElement,
+    TemplateResult,
+    LitElement,
+} from 'lit-element';
+
+@customElement('test-textout')
+export class TestTextOut extends LitElement {
+    @property() public text = 'default';
+
+    public render(): TemplateResult {
+        return html` <div>${this.text}</div> `;
+    }
+}

src/components/textcomponent/index.ts

@@ -0,0 +1,39 @@
+import {
+    html,
+    property,
+    customElement,
+    TemplateResult,
+    LitElement,
+} from 'lit-element';
+import { BindableProperty } from '../../tools/BindableProperty';
+
+@customElement('test-text')
+export class TestText extends LitElement {
+    @property()
+    public get text(): string {
+        return this.textOut.data;
+    }
+
+    public set text(val) {
+        this.textOut.next(val);
+    }
+
+    textOut = new BindableProperty<string>(oldVal => {
+        this.requestUpdate('textOut', oldVal);
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onChange(e: any): void {
+        this.textOut.next(e.srcElement.value);
+    }
+
+    public render(): TemplateResult {
+        return html`
+            <input
+                type="text"
+                .value="${this.textOut.data}"
+                @input="${this.onChange}"
+            />
+        `;
+    }
+}