@blockquote-web-components/blockquote-base-embedded-webview 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockquote-web-components/blockquote-base-embedded-webview",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Webcomponent blockquote-base-embedded-webview following open-wc recommendations",
   "keywords": [
     "lit",
@@ -14,7 +14,9 @@
     ".": {
       "default": "./index.js"
     },
-    "./package.json": "./package.json",
+    "./package.json": {
+      "default": "./package.json"
+    },
     "./src/BlockquoteBaseEmbeddedWebview.js": {
       "default": "./src/BlockquoteBaseEmbeddedWebview.js"
     },
@@ -168,7 +170,7 @@
     "lit": "^2.0.2"
   },
   "devDependencies": {
-    "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.4.1",
+    "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.4.2",
     "@blockquote-web-components/blockquote-foundations-sass": "^1.0.0",
     "@polymer/iron-test-helpers": "^3.0.1"
   },
@@ -176,5 +178,5 @@
     "access": "public"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "0c5ec040de2e96a0464da78debdc5329d99ba700"
+  "gitHead": "1e2c4a8e7117f9d24e0eb303f34b7d93ab461e54"
 }

package/src/BlockquoteBaseEmbeddedWebview.js

@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit';
+import { html, LitElement, render as LitHtmlRender } from 'lit';
 import { ref, createRef } from 'lit/directives/ref.js';
 import '../define/blockquote-base-embedded-webview-size.js';
 import '../define/blockquote-base-embedded-webview-resize.js';
@@ -195,7 +195,6 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
     this._controlBottom = parseFloat(
       window.getComputedStyle(this._embeddedResizeRef.value).paddingBottom,
     );
-    this.append(this.embedded);
   }
 
   _updateSize({ detail }) {
@@ -217,7 +216,15 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
   }
 
   render() {
-    return html` ${this._headerTpl} ${this._mainTpl} `;
+    return html` ${this._headerTpl} ${this._mainTpl} ${this._litHtmlRender()}`;
+  }
+
+  _litHtmlRender() {
+    LitHtmlRender(this._lightDomTpl, this);
+  }
+
+  get _lightDomTpl() {
+    return this.embedded;
   }
 
   get _headerTpl() {

package/src/BlockquoteBaseEmbeddedWebviewElement.js

@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit';
+import { html, LitElement, render as LitHtmlRender } from 'lit';
 import { styles } from './styles/blockquote-base-embedded-webview-element-styles.css.js';
 /**
   ![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
@@ -70,21 +70,26 @@ export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
     });
 
     this._embeddedElement.addEventListener('load', this._onLoadElement);
-
-    // append element after add listener `load`
-    this.append(this._embeddedElement);
   }
 
   willUpdate(props) {
     super.willUpdate && super.willUpdate(props);
 
-    if (props.has('src') && this.src !== '') {
+    if ((props.has('src') || props.has('embeddedTitle')) && this.src !== '') {
       this._fetch(this.src);
     }
   }
 
   render() {
-    return html` ${this._embeddedTpl} `;
+    return html` ${this._embeddedTpl} ${this._litHtmlRender()} `;
+  }
+
+  _litHtmlRender() {
+    LitHtmlRender(this._lightDomTpl, this);
+  }
+
+  get _lightDomTpl() {
+    return this._embeddedElement;
   }
 
   get _loadResource() {