diff --git a/api/js/etemplate/et2_core_DOMWidget.js b/api/js/etemplate/et2_core_DOMWidget.js
index e63b34dd21..bcab4e052d 100644
--- a/api/js/etemplate/et2_core_DOMWidget.js
+++ b/api/js/etemplate/et2_core_DOMWidget.js
@@ -148,7 +148,7 @@ export class et2_DOMWidget extends et2_widget {
      */
     insertChild(_node, _idx) {
         super.insertChild(_node, _idx);
-        if (_node.instanceOf(et2_DOMWidget) && typeof _node.hasOwnProperty('parentNode') && this.getDOMNode(this)) {
+        if (_node.instanceOf && _node.instanceOf(et2_DOMWidget) && typeof _node.hasOwnProperty('parentNode') && this.getDOMNode(this)) {
             try {
                 _node.setParentDOMNode(this.getDOMNode(_node));
             }
@@ -157,6 +157,10 @@ export class et2_DOMWidget extends et2_widget {
                 // will probably try again in doLoadingFinished()
             }
         }
+        // _node is actually a Web Component
+        else if (_node instanceof Element) {
+            this.getDOMNode().append(_node);
+        }
     }
     isAttached() {
         return this.parentNode != null;
diff --git a/api/js/etemplate/et2_core_DOMWidget.ts b/api/js/etemplate/et2_core_DOMWidget.ts
index 825a99e3af..e82e07b59b 100644
--- a/api/js/etemplate/et2_core_DOMWidget.ts
+++ b/api/js/etemplate/et2_core_DOMWidget.ts
@@ -270,7 +270,7 @@ export abstract class et2_DOMWidget extends et2_widget implements et2_IDOMNode
 	{
 		super.insertChild(_node, _idx);
 
-		if(_node.instanceOf(et2_DOMWidget) && typeof _node.hasOwnProperty('parentNode') && this.getDOMNode(this))
+		if(_node.instanceOf && _node.instanceOf(et2_DOMWidget) && typeof _node.hasOwnProperty('parentNode') && this.getDOMNode(this))
 		{
 			try
 			{
@@ -282,6 +282,11 @@ export abstract class et2_DOMWidget extends et2_widget implements et2_IDOMNode
 				// will probably try again in doLoadingFinished()
 			}
 		}
+		// _node is actually a Web Component
+		else if (_node instanceof Element )
+		{
+			this.getDOMNode().append(_node);
+		}
 	}
 
 	isAttached() {
diff --git a/api/js/etemplate/et2_core_widget.js b/api/js/etemplate/et2_core_widget.js
index fd6e3b742b..b82b66a534 100644
--- a/api/js/etemplate/et2_core_widget.js
+++ b/api/js/etemplate/et2_core_widget.js
@@ -544,11 +544,32 @@ export class et2_widget extends ClassWithAttributes {
         this.parseXMLAttrs(_node.attributes, attributes, constructor.prototype);
         // Do an sanity check for the attributes
         ClassWithAttributes.generateAttributeSet(et2_attribute_registry[constructor.name], attributes);
-        // Creates the new widget, passes this widget as an instance and
-        // passes the widgetType. Then it goes on loading the XML for it.
-        var widget = new constructor(this, attributes);
-        // Load the widget itself from XML
-        widget.loadFromXML(_node);
+        if (undefined == window.customElements.get(_nodeName)) {
+            // Creates the new widget, passes this widget as an instance and
+            // passes the widgetType. Then it goes on loading the XML for it.
+            var widget = new constructor(this, attributes);
+            // Load the widget itself from XML
+            widget.loadFromXML(_node);
+        }
+        else {
+            widget = this.loadWebComponent(_nodeName, _node, attributes);
+            if (this.addChild) {
+                // webcomponent going into old et2_widget
+                this.addChild(widget);
+            }
+        }
+        return widget;
+    }
+    /**
+     * Load a Web Component
+     * @param _nodeName
+     * @param _node
+     */
+    loadWebComponent(_nodeName, _node, attributes) {
+        let widget = document.createElement(_nodeName);
+        widget.textContent = _node.textContent;
+        // Apply any set attributes
+        _node.getAttributeNames().forEach(attribute => widget.setAttribute(attribute, attributes[attribute]));
         return widget;
     }
     /**
diff --git a/api/js/etemplate/et2_core_widget.ts b/api/js/etemplate/et2_core_widget.ts
index d1e2f00ca5..545a80dcaf 100644
--- a/api/js/etemplate/et2_core_widget.ts
+++ b/api/js/etemplate/et2_core_widget.ts
@@ -25,6 +25,7 @@ import {et2_IDOMNode, et2_IInputNode} from "./et2_core_interfaces";
 // fixing circular dependencies by only importing type
 import type {et2_container} from "./et2_core_baseWidget";
 import type {et2_inputWidget, et2_input} from "./et2_core_inputWidget";
+import {decorateLanguageService} from "ts-lit-plugin/lib/decorate-language-service";
 
 /**
  * The registry contains all XML tag names and the corresponding widget
@@ -716,12 +717,40 @@ export class et2_widget extends ClassWithAttributes
 		// Do an sanity check for the attributes
 		ClassWithAttributes.generateAttributeSet(et2_attribute_registry[constructor.name], attributes);
 
-		// Creates the new widget, passes this widget as an instance and
-		// passes the widgetType. Then it goes on loading the XML for it.
-		var widget = new constructor(this, attributes);
+		if(undefined == window.customElements.get(_nodeName))
+		{
+			// Creates the new widget, passes this widget as an instance and
+			// passes the widgetType. Then it goes on loading the XML for it.
+			var widget = new constructor(this, attributes);
 
-		// Load the widget itself from XML
-		widget.loadFromXML(_node);
+			// Load the widget itself from XML
+			widget.loadFromXML(_node);
+		}
+		else
+		{
+			widget = this.loadWebComponent(_nodeName, _node, attributes);
+
+			if(this.addChild)
+			{
+				// webcomponent going into old et2_widget
+				this.addChild(widget);
+			}
+		}
+		return widget;
+	}
+
+	/**
+	 * Load a Web Component
+	 * @param _nodeName
+	 * @param _node
+	 */
+	loadWebComponent(_nodeName : string, _node, attributes : Object) : HTMLElement
+	{
+		let widget = document.createElement(_nodeName);
+		widget.textContent = _node.textContent;
+
+		// Apply any set attributes
+		_node.getAttributeNames().forEach(attribute => widget.setAttribute(attribute, attributes[attribute]));
 
 		return widget;
 	}