@webtides/element-js 1.0.0-alpha.10 → 1.0.0-alpha.11

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webtides/element-js",
-	"version": "1.0.0-alpha.10",
+	"version": "1.0.0-alpha.11",
 	"module": "index.js",
 	"main": "index.js",
 	"type": "module",

package/src/BaseElement.js

@@ -24,7 +24,12 @@ export { toString } from './util/toString.js';
 
 /**
  * Options object for the BaseElement propertyOptions option
- * @typedef {Object} PropertyOptions
+ * @typedef {Object<string, PropertyOption>} PropertyOptions
+ */
+
+/**
+ * Option object for a property of the BaseElement propertyOptions option
+ * @typedef {Object} PropertyOption
  * @property {undefined | boolean | function} [reflect] - When set to true the element will reflect property changes back to attributes if the attribute was not present when connecting the element. By default, all attributes that are present when connecting the element will be reflected anyway. Default is `undefined`
  * @property {undefined | boolean | function} [parse] - When set to false the element will not automatically try to parse the attributes string value to a complex type (number, array, object). Default is `undefined`
  * @property {undefined | boolean | function} [notify] - When set to true the element will dispatch CustomEvents for every property/attribute change. The event name will be the property name all lowercase and camel to dashes with a postfix of -changed. Default is `undefined`

package/src/TemplateElement.js

@@ -37,7 +37,7 @@ class TemplateElement extends StyledElement {
 
 	/**
 	 * The template method should be overridden in extending elements and return the template to be rendered to the root
-	 * @returns {TemplateResult}
+	 * @returns {TemplateResult | string}
 	 */
 	template() {
 		return html``;
@@ -57,12 +57,7 @@ class TemplateElement extends StyledElement {
 	 */
 	renderTemplate() {
 		const template = this._template || this.template();
-		if (typeof template === 'string') {
-			// just a plain string literal. no lit-html required
-			this.getRoot().innerHTML = `${template}`;
-		} else {
-			render(template, this.getRoot());
-		}
+		render(template, this.getRoot());
 	}
 
 	/**

package/src/dom-parts/render.js

@@ -4,7 +4,12 @@
  * @param {Element} domNode
  */
 const render = (template, domNode) => {
-	template.renderInto(domNode);
+	if (typeof template === 'string') {
+		// just a plain string (or literal)
+		domNode.innerHTML = template;
+	} else {
+		template.renderInto(domNode);
+	}
 };
 
 export { render };