From d679dd1bc3fab914790f16ab16cca07219198916 Mon Sep 17 00:00:00 2001
From: LastLeaf <bqfu@163.com>
Date: Mon, 8 Jul 2024 15:30:03 +0800
Subject: [PATCH] test: change tests to meet :host requirements

---
 glass-easel/tests/base/composed_backend.ts    |   2 +
 glass-easel/tests/base/shadow_backend.ts      |   2 +
 glass-easel/tests/core/behavior.test.ts       |   6 +-
 glass-easel/tests/core/data_update.test.ts    |   4 +-
 glass-easel/tests/core/placeholder.test.ts    |  38 ++--
 glass-easel/tests/core/slot.test.ts           | 172 +++++++++---------
 .../tests/core/trait_behaviors.test.ts        |   4 +-
 glass-easel/tests/tmpl/binding_map.test.ts    |  12 +-
 glass-easel/tests/tmpl/lvalue.test.ts         |  36 ++--
 .../tests/tmpl/native_rendering.test.ts       |  12 +-
 glass-easel/tests/tmpl/structure.test.ts      | 128 ++++++-------
 11 files changed, 217 insertions(+), 199 deletions(-)

diff --git a/glass-easel/tests/base/composed_backend.ts b/glass-easel/tests/base/composed_backend.ts
index 3d89d7e..6b418e8 100644
--- a/glass-easel/tests/base/composed_backend.ts
+++ b/glass-easel/tests/base/composed_backend.ts
@@ -286,6 +286,8 @@ abstract class Node implements glassEasel.composedBackend.Element {
       })
       const tagName = this.tagName.toLowerCase()
       ret.push(`<${tagName}`)
+      const is = this.__wxElement?.asGeneralComponent()?.is
+      if (typeof is === 'string') props.is = is
       if (this.id) props.id = this.getAttribute('id')!
       if (this._$style) props.style = this.getAttribute('style')!
       if (this._$classes) props.class = this.getAttribute('class')!
diff --git a/glass-easel/tests/base/shadow_backend.ts b/glass-easel/tests/base/shadow_backend.ts
index 73a105d..c9bee8e 100644
--- a/glass-easel/tests/base/shadow_backend.ts
+++ b/glass-easel/tests/base/shadow_backend.ts
@@ -398,6 +398,8 @@ abstract class Node implements glassEasel.backend.Element {
       })
       const tagName = this.tagName.toLowerCase()
       ret.push(`<${tagName}`)
+      const is = this.__wxElement?.asGeneralComponent()?.is
+      if (typeof is === 'string') props.is = is
       if (this.id) props.id = this.getAttribute('id')!
       if (this._$style) props.style = this.getAttribute('style')!
       if (this._$classes) props.class = this.getAttribute('class')!
diff --git a/glass-easel/tests/core/behavior.test.ts b/glass-easel/tests/core/behavior.test.ts
index 3f3c919..1249286 100644
--- a/glass-easel/tests/core/behavior.test.ts
+++ b/glass-easel/tests/core/behavior.test.ts
@@ -135,7 +135,7 @@ describe('chaining-form interface', () => {
       )
       .registerComponent()
     const elem = glassEasel.Component.createWithContext('root', compDef, domBackend)
-    expect(domHtml(elem)).toBe('<child><div class="invalid a b"></div></child>')
+    expect(domHtml(elem)).toBe('<child is=""><div class="invalid a b"></div></child>')
   })
 
   test('chaining data and observers', () => {
@@ -579,7 +579,9 @@ describe('chaining-form interface', () => {
     const comp = glassEasel.Component.createWithContext('root', compDef, domBackend)
     glassEasel.Element.pretendAttached(comp)
     expect(eventArr).toStrictEqual([1, 2, 1, 2, 1, 2])
-    expect(domHtml(comp)).toBe('<parent><child>A</child><child>B</child><child>C</child></parent>')
+    expect(domHtml(comp)).toBe(
+      '<parent is="parent-comp"><child is="child-comp">A</child><child is="child-comp">B</child><child is="child-comp">C</child></parent>',
+    )
   })
 
   test('chaining filter', () => {
diff --git a/glass-easel/tests/core/data_update.test.ts b/glass-easel/tests/core/data_update.test.ts
index 5f33fb3..cf07d74 100644
--- a/glass-easel/tests/core/data_update.test.ts
+++ b/glass-easel/tests/core/data_update.test.ts
@@ -92,7 +92,7 @@ describe('partial update', () => {
     })
     const elem = glassEasel.Component.createWithContext('root', def, domBackend)
     glassEasel.Element.pretendAttached(elem)
-    expect(domHtml(elem)).toBe('<x-c>10</x-c><x-c>20</x-c>')
+    expect(domHtml(elem)).toBe('<x-c is="">10</x-c><x-c is="">20</x-c>')
     expect(execArr).toStrictEqual(['B', 'A', 'B', 'A'])
     execArr = []
     ;(elem.data.list[0]!.v as any) = 30
@@ -100,7 +100,7 @@ describe('partial update', () => {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       list: elem.data.list as any,
     })
-    expect(domHtml(elem)).toBe('<x-c>30</x-c><x-c>20</x-c>')
+    expect(domHtml(elem)).toBe('<x-c is="">30</x-c><x-c is="">20</x-c>')
     expect(execArr).toStrictEqual(['D', 'B', 'A', 'B'])
     execArr = []
     elem.setData({ list: [] })
diff --git a/glass-easel/tests/core/placeholder.test.ts b/glass-easel/tests/core/placeholder.test.ts
index 6d2b1e4..8bb1b18 100644
--- a/glass-easel/tests/core/placeholder.test.ts
+++ b/glass-easel/tests/core/placeholder.test.ts
@@ -58,21 +58,21 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
     const elem = glassEasel.Component.createWithContext('root', def.general(), testBackend)
     expect(listener).toHaveBeenCalledTimes(1)
     expect(listener).toHaveBeenNthCalledWith(1, false, 'placeholder/simple/child', elem)
-    expect(domHtml(elem)).toBe('<div><child><span></span></child></div>')
+    expect(domHtml(elem)).toBe('<div><child is=""><span></span></child></div>')
     matchElementWithDom(elem)
 
     componentSpace.defineComponent({
       is: 'placeholder/simple/child',
       template: tmpl('child<div><slot/></div>'),
     })
-    expect(domHtml(elem)).toBe('<div><child>child<div><span></span></div></child></div>')
+    expect(domHtml(elem)).toBe('<div><child is="placeholder/simple/child">child<div><span></span></div></child></div>')
     matchElementWithDom(elem)
 
     elem.setData({
       b: true,
     })
     expect(domHtml(elem)).toBe(
-      '<div><child>child<div><span></span></div></child><child-another id="b"></child-another></div>',
+      '<div><child is="placeholder/simple/child">child<div><span></span></div></child><child-another id="b"></child-another></div>',
     )
     matchElementWithDom(elem)
   })
@@ -95,7 +95,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       })
       .registerComponent()
     const elem = glassEasel.Component.createWithContext('root', def.general(), testBackend)
-    expect(domHtml(elem)).toBe('<child>test</child>')
+    expect(domHtml(elem)).toBe('<child is="view">test</child>')
     matchElementWithDom(elem)
   })
 
@@ -116,7 +116,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       })
       .registerComponent()
     const elem = glassEasel.Component.createWithContext('root', def.general(), testBackend)
-    expect(domHtml(elem)).toBe('<parent></parent>')
+    expect(domHtml(elem)).toBe('<parent is=""></parent>')
     matchElementWithDom(elem)
 
     componentSpace.groupRegister(() => {
@@ -131,7 +131,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       const childDef = componentSpace.define('child').template(tmpl('CHILD')).registerComponent()
       componentSpace.setGlobalUsingComponent('child', childDef)
     })
-    expect(domHtml(elem)).toBe('<parent><child>CHILD</child></parent>')
+    expect(domHtml(elem)).toBe('<parent is="parent"><child is="child">CHILD</child></parent>')
     matchElementWithDom(elem)
   })
 
@@ -164,18 +164,18 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
     expect(listener).toHaveBeenCalledTimes(2)
     expect(listener).toHaveBeenNthCalledWith(1, true, 'child-pub', elem)
     expect(listener).toHaveBeenNthCalledWith(2, false, 'child', elem)
-    expect(domHtml(elem)).toBe('<child></child><child-private></child-private>')
+    expect(domHtml(elem)).toBe('<child is=""></child><child-private is=""></child-private>')
     matchElementWithDom(elem)
 
     extraCs.defineComponent({
       is: 'child',
       template: tmpl('A'),
     })
-    expect(domHtml(elem)).toBe('<child></child><child-private>A</child-private>')
+    expect(domHtml(elem)).toBe('<child is=""></child><child-private is="child">A</child-private>')
     matchElementWithDom(elem)
 
     extraCs.exportComponent('child-pub', 'child')
-    expect(domHtml(elem)).toBe('<child>A</child><child-private>A</child-private>')
+    expect(domHtml(elem)).toBe('<child is="child">A</child><child-private is="child">A</child-private>')
     matchElementWithDom(elem)
   })
 
@@ -218,7 +218,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       is: 'placeholder/simple/child',
       template: tmpl('<slot />B'),
     })
-    expect(domHtml(elem)).toBe('<child>AB</child>')
+    expect(domHtml(elem)).toBe('<child is="placeholder/simple/child">AB</child>')
     matchElementWithDom(elem)
   })
 
@@ -260,14 +260,14 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       },
       template: tmpl('<slot /><g>B</g>'),
     })
-    expect(domHtml(elem)).toBe('<child>A<span>B</span></child>')
+    expect(domHtml(elem)).toBe('<child is="placeholder/simple/child">A<span>B</span></child>')
     matchElementWithDom(elem)
 
     componentSpace.defineComponent({
       is: 'placeholder/simple/child-of-child',
       template: tmpl('<slot />C'),
     })
-    expect(domHtml(elem)).toBe('<child>A<g>BC</g></child>')
+    expect(domHtml(elem)).toBe('<child is="placeholder/simple/child">A<g is="placeholder/simple/child-of-child">BC</g></child>')
     matchElementWithDom(elem)
   })
 
@@ -321,14 +321,16 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       template: tmpl('{{ prop }}'),
     })
     const child = (elem.$.child as glassEasel.GeneralComponent).asInstanceOf(childDef)!
-    expect(domHtml(elem)).toBe('<child>new</child><span prop="1">0</span>')
+    expect(domHtml(elem)).toBe(
+      '<child is="placeholder/simple/child">new</child><span prop="1">0</span>',
+    )
     expect(child.data.prop).toBe('new')
 
     elem.setData({
       arr: ['1', '2'],
     })
 
-    expect(domHtml(elem)).toBe('<child>new</child><span prop="1">0</span><span prop="2">1</span>')
+    expect(domHtml(elem)).toBe('<child is="placeholder/simple/child">new</child><span prop="1">0</span><span prop="2">1</span>')
     matchElementWithDom(elem)
 
     const cDef = componentSpace.defineComponent({
@@ -340,7 +342,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
     })
     const c0 = (elem.$['c-0'] as glassEasel.GeneralComponent).asInstanceOf(cDef)!
     const c1 = (elem.$['c-1'] as glassEasel.GeneralComponent).asInstanceOf(cDef)!
-    expect(domHtml(elem)).toBe('<child>new</child><c>1</c><c>2</c>')
+    expect(domHtml(elem)).toBe('<child is="placeholder/simple/child">new</child><c is="placeholder/simple/c">1</c><c is="placeholder/simple/c">2</c>')
     expect(c0.data.prop).toBe('1')
     expect(c0.dataset.index).toBe(0)
     expect(c1.data.prop).toBe('2')
@@ -404,7 +406,9 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
     expect(callOrder).toStrictEqual([1])
     glassEasel.Element.pretendAttached(elem)
     expect(callOrder).toStrictEqual([1, 2, 7])
-    expect(domHtml(elem)).toBe('<child><span>3<a></a></span></child>')
+    expect(domHtml(elem)).toBe(
+      '<child is=""><span>3<a is="placeholder/lifetime/a"></a></span></child>',
+    )
     matchElementWithDom(elem)
     callOrder.splice(0, 99)
 
@@ -430,7 +434,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       },
     })
     expect(callOrder).toStrictEqual([4, 3, 5, 8])
-    expect(domHtml(elem)).toBe('<child><div>21</div></child>')
+    expect(domHtml(elem)).toBe('<child is="placeholder/lifetime/child"><div>21</div></child>')
     matchElementWithDom(elem)
   })
 
diff --git a/glass-easel/tests/core/slot.test.ts b/glass-easel/tests/core/slot.test.ts
index bdde058..8432372 100644
--- a/glass-easel/tests/core/slot.test.ts
+++ b/glass-easel/tests/core/slot.test.ts
@@ -49,7 +49,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           .usingComponents({ child, comp })
           .definition({
             template: tmpl(`
-              <child>
+              <child is="">
                 <comp slot="a" s="A">A</comp>
                 <comp slot="b" s="B">B</comp>
                 <comp slot="c" s="C">C</comp>
@@ -82,13 +82,13 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         glassEasel.Element.pretendAttached(parentElem)
         expect(childElem.childNodes.length).toBe(0)
         expect(ops).toEqual([])
-        expect(domHtml(parentElem)).toBe('<child><span id="a"></span></child>')
+        expect(domHtml(parentElem)).toBe('<child is=""><span id="a"></span></child>')
         matchElementWithDom(parentElem)
 
         a.appendChild(slotA1)
         expect(childElem.childNodes.length).toBe(4)
         expect(slotA1.getComposedChildren()).toEqual(childElem.childNodes)
-        expect(domHtml(parentElem)).toBe('<child><span id="a"><comp>A</comp></span></child>')
+        expect(domHtml(parentElem)).toBe('<child is=""><span id="a"><comp is="">A</comp></span></child>')
         expect(ops).toEqual([[-1, 'A']])
         matchElementWithDom(parentElem)
 
@@ -97,7 +97,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         expect(slotA1.getComposedChildren()).toEqual(childElem.childNodes.slice(0, 4))
         expect(slotA2.getComposedChildren()).toEqual(childElem.childNodes.slice(4, 8))
         expect(domHtml(parentElem)).toBe(
-          '<child><span id="a"><comp>A</comp><comp>A</comp></span></child>',
+          '<child is=""><span id="a"><comp is="">A</comp><comp is="">A</comp></span></child>',
         )
         expect(ops).toEqual([
           [-1, 'A'],
@@ -111,7 +111,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         expect(slotA2.getComposedChildren()).toEqual(childElem.childNodes.slice(4, 8))
         expect(slotB.getComposedChildren()).toEqual(childElem.childNodes.slice(8, 12))
         expect(domHtml(parentElem)).toBe(
-          '<child><span id="a"><comp>A</comp><comp>B</comp><comp>A</comp></span></child>',
+          '<child is=""><span id="a"><comp is="">A</comp><comp is="">B</comp><comp is="">A</comp></span></child>',
         )
         expect(ops).toEqual([
           [-1, 'A'],
@@ -125,7 +125,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         expect(slotA2.getComposedChildren()).toEqual(childElem.childNodes.slice(0, 4))
         expect(slotB.getComposedChildren()).toEqual(childElem.childNodes.slice(4, 8))
         expect(domHtml(parentElem)).toBe(
-          '<child><span id="a"><comp>B</comp><comp>A</comp></span></child>',
+          '<child is=""><span id="a"><comp is="">B</comp><comp is="">A</comp></span></child>',
         )
         expect(ops).toEqual([
           [-1, 'A'],
@@ -141,7 +141,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         expect(slotB.getComposedChildren()).toEqual(childElem.childNodes.slice(4, 8))
         expect(slotA1.getComposedChildren()).toEqual(childElem.childNodes.slice(8, 12))
         expect(domHtml(parentElem)).toBe(
-          '<child><span id="a"><comp>B</comp><comp>A</comp><comp>A</comp></span></child>',
+          '<child is=""><span id="a"><comp is="">B</comp><comp is="">A</comp><comp is="">A</comp></span></child>',
         )
         expect(ops).toEqual([
           [-1, 'A'],
@@ -159,7 +159,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         expect(slotA1.getComposedChildren()).toEqual(childElem.childNodes.slice(8, 12))
         expect(slot1.getComposedChildren()).toEqual(childElem.childNodes.slice(12, 16))
         expect(domHtml(parentElem)).toBe(
-          '<child><span id="a"><comp>B</comp><comp>A</comp><comp>A</comp><comp>D</comp></span></child>',
+          '<child is=""><span id="a"><comp is="">B</comp><comp is="">A</comp><comp is="">A</comp><comp is="">D</comp></span></child>',
         )
         expect(ops).toEqual([
           [-1, 'A'],
@@ -185,7 +185,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           .define()
           .usingComponents({ child })
           .definition({
-            template: tmpl('<child></child>'),
+            template: tmpl('<child is=""></child>'),
           })
           .registerComponent()
 
@@ -213,7 +213,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         expect(slotA.getComposedChildren()).toEqual([])
         expect(slotB.getComposedChildren()).toEqual([])
         expect(slotC.getComposedChildren()).toEqual([])
-        expect(domHtml(parentElem)).toBe('<child><span></span></child>')
+        expect(domHtml(parentElem)).toBe('<child is=""><span></span></child>')
         matchElementWithDom(parentElem)
 
         childElem.appendChild(contentA)
@@ -221,7 +221,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         expect(slotA.getComposedChildren()).toEqual([])
         expect(slotB.getComposedChildren()).toEqual([])
         expect(slotC.getComposedChildren()).toEqual([])
-        expect(domHtml(parentElem)).toBe('<child><span></span></child>')
+        expect(domHtml(parentElem)).toBe('<child is=""><span></span></child>')
         matchElementWithDom(parentElem)
 
         glassEasel.Element.setSlotElement(contentA, slotA)
@@ -229,7 +229,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         expect(slotA.getComposedChildren()).toEqual([contentA])
         expect(slotB.getComposedChildren()).toEqual([])
         expect(slotC.getComposedChildren()).toEqual([])
-        expect(domHtml(parentElem)).toBe('<child>A<span></span></child>')
+        expect(domHtml(parentElem)).toBe('<child is="">A<span></span></child>')
         matchElementWithDom(parentElem)
 
         glassEasel.Element.setSlotElement(contentA, slotB)
@@ -237,7 +237,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         expect(slotA.getComposedChildren()).toEqual([])
         expect(slotB.getComposedChildren()).toEqual([contentA])
         expect(slotC.getComposedChildren()).toEqual([])
-        expect(domHtml(parentElem)).toBe('<child><span>A</span></child>')
+        expect(domHtml(parentElem)).toBe('<child is=""><span>A</span></child>')
         matchElementWithDom(parentElem)
 
         childElem.removeChild(contentA)
@@ -245,7 +245,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         expect(slotA.getComposedChildren()).toEqual([])
         expect(slotB.getComposedChildren()).toEqual([])
         expect(slotC.getComposedChildren()).toEqual([])
-        expect(domHtml(parentElem)).toBe('<child><span></span></child>')
+        expect(domHtml(parentElem)).toBe('<child is=""><span></span></child>')
         matchElementWithDom(parentElem)
 
         glassEasel.Element.setSlotElement(contentA, slotC)
@@ -254,7 +254,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         expect(slotA.getComposedChildren()).toEqual([])
         expect(slotB.getComposedChildren()).toEqual([])
         expect(slotC.getComposedChildren()).toEqual([contentA])
-        expect(domHtml(parentElem)).toBe('<child><span></span>A</child>')
+        expect(domHtml(parentElem)).toBe('<child is=""><span></span>A</child>')
         matchElementWithDom(parentElem)
 
         childElem.appendChild(contentB)
@@ -264,7 +264,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         expect(slotA.getComposedChildren()).toEqual([])
         expect(slotB.getComposedChildren()).toEqual([])
         expect(slotC.getComposedChildren()).toEqual([contentA])
-        expect(domHtml(parentElem)).toBe('<child><span></span>A</child>')
+        expect(domHtml(parentElem)).toBe('<child is=""><span></span>A</child>')
         matchElementWithDom(parentElem)
 
         glassEasel.Element.setSlotElement(contentB, slotC)
@@ -274,7 +274,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         expect(slotA.getComposedChildren()).toEqual([])
         expect(slotB.getComposedChildren()).toEqual([])
         expect(slotC.getComposedChildren()).toEqual([contentA, contentB, textB])
-        expect(domHtml(parentElem)).toBe('<child><span></span>AB</child>')
+        expect(domHtml(parentElem)).toBe('<child is=""><span></span>AB</child>')
         matchElementWithDom(parentElem)
 
         childElem.appendChild(contentA)
@@ -284,7 +284,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         expect(slotA.getComposedChildren()).toEqual([])
         expect(slotB.getComposedChildren()).toEqual([])
         expect(slotC.getComposedChildren()).toEqual([contentB, textB, contentA])
-        expect(domHtml(parentElem)).toBe('<child><span></span>BA</child>')
+        expect(domHtml(parentElem)).toBe('<child is=""><span></span>BA</child>')
         matchElementWithDom(parentElem)
 
         glassEasel.Element.setSlotElement(contentB, slotB)
@@ -294,7 +294,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         expect(slotA.getComposedChildren()).toEqual([])
         expect(slotB.getComposedChildren()).toEqual([contentB, textB])
         expect(slotC.getComposedChildren()).toEqual([contentA])
-        expect(domHtml(parentElem)).toBe('<child><span>B</span>A</child>')
+        expect(domHtml(parentElem)).toBe('<child is=""><span>B</span>A</child>')
         matchElementWithDom(parentElem)
 
         childElem.removeChild(contentB)
@@ -304,7 +304,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         expect(slotA.getComposedChildren()).toEqual([])
         expect(slotB.getComposedChildren()).toEqual([])
         expect(slotC.getComposedChildren()).toEqual([contentA])
-        expect(domHtml(parentElem)).toBe('<child><span></span>A</child>')
+        expect(domHtml(parentElem)).toBe('<child is=""><span></span>A</child>')
         matchElementWithDom(parentElem)
 
         glassEasel.Element.setSlotElement(contentB, slotA)
@@ -315,7 +315,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         expect(slotA.getComposedChildren()).toEqual([contentB, textB])
         expect(slotB.getComposedChildren()).toEqual([])
         expect(slotC.getComposedChildren()).toEqual([contentA])
-        expect(domHtml(parentElem)).toBe('<child>B<span></span>A</child>')
+        expect(domHtml(parentElem)).toBe('<child is="">B<span></span>A</child>')
         matchElementWithDom(parentElem)
 
         childElem.removeChild(contentA)
@@ -325,7 +325,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         expect(slotA.getComposedChildren()).toEqual([contentB, textB])
         expect(slotB.getComposedChildren()).toEqual([])
         expect(slotC.getComposedChildren()).toEqual([])
-        expect(domHtml(parentElem)).toBe('<child>B<span></span></child>')
+        expect(domHtml(parentElem)).toBe('<child is="">B<span></span></child>')
         matchElementWithDom(parentElem)
 
         childElem.removeChild(contentB)
@@ -335,7 +335,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         expect(slotA.getComposedChildren()).toEqual([])
         expect(slotB.getComposedChildren()).toEqual([])
         expect(slotC.getComposedChildren()).toEqual([])
-        expect(domHtml(parentElem)).toBe('<child><span></span></child>')
+        expect(domHtml(parentElem)).toBe('<child is=""><span></span></child>')
         matchElementWithDom(parentElem)
       })
     })
@@ -367,7 +367,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           }))
           .definition({
             template: tmpl(`
-              <child>
+              <child is="">
                 <block slot="{{slotName1}}">{{slotContent1}}</block>
                 <block slot="{{slotName2}}">{{slotContent2}}</block>
               </child>
@@ -383,37 +383,37 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         const childElem = parentElem.getShadowRoot()!.childNodes[0]!.asInstanceOf(child)!
 
         expect(childElem.childNodes.length).toBe(6)
-        expect(domHtml(parentElem)).toBe('<child>AB<span>AB</span>AB</child>')
+        expect(domHtml(parentElem)).toBe('<child is="">AB<span>AB</span>AB</child>')
         matchElementWithDom(parentElem)
 
         parentElem.setData({ slotContent1: 'AA' })
         expect(childElem.childNodes.length).toBe(6)
-        expect(domHtml(parentElem)).toBe('<child>AAB<span>AAB</span>AAB</child>')
+        expect(domHtml(parentElem)).toBe('<child is="">AAB<span>AAB</span>AAB</child>')
         matchElementWithDom(parentElem)
 
         parentElem.setData({ slotName1: 'b' })
         expect(childElem.childNodes.length).toBe(6)
-        expect(domHtml(parentElem)).toBe('<child>B<span>B</span>B</child>')
+        expect(domHtml(parentElem)).toBe('<child is="">B<span>B</span>B</child>')
         matchElementWithDom(parentElem)
 
         parentElem.setData({ slotContent1: 'C', slotName1: 'a' })
         expect(childElem.childNodes.length).toBe(6)
-        expect(domHtml(parentElem)).toBe('<child>CB<span>CB</span>CB</child>')
+        expect(domHtml(parentElem)).toBe('<child is="">CB<span>CB</span>CB</child>')
         matchElementWithDom(parentElem)
 
         parentElem.setData({ slotContent2: 'D' })
         expect(childElem.childNodes.length).toBe(6)
-        expect(domHtml(parentElem)).toBe('<child>CD<span>CD</span>CD</child>')
+        expect(domHtml(parentElem)).toBe('<child is="">CD<span>CD</span>CD</child>')
         matchElementWithDom(parentElem)
 
         parentElem.setData({ slotName2: 'c' })
         expect(childElem.childNodes.length).toBe(6)
-        expect(domHtml(parentElem)).toBe('<child>C<span>C</span>C</child>')
+        expect(domHtml(parentElem)).toBe('<child is="">C<span>C</span>C</child>')
         matchElementWithDom(parentElem)
 
         parentElem.setData({ slotName1: 'b', slotName2: 'c' })
         expect(childElem.childNodes.length).toBe(6)
-        expect(domHtml(parentElem)).toBe('<child><span></span></child>')
+        expect(domHtml(parentElem)).toBe('<child is=""><span></span></child>')
         matchElementWithDom(parentElem)
       })
 
@@ -436,7 +436,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           .usingComponents({ child })
           .definition({
             template: tmpl(`
-              <child>
+              <child is="">
                 <span>456</span>
                 <div slot="abc" slot:some-text>{{someText}}</div>
               </child>
@@ -451,19 +451,19 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         )
         const childElem = parentElem.getShadowRoot()!.childNodes[0]!.asInstanceOf(child)!
 
-        expect(domHtml(parentElem)).toBe('<child><div>123</div></child>')
+        expect(domHtml(parentElem)).toBe('<child is=""><div>123</div></child>')
         matchElementWithDom(parentElem)
 
         childElem.setData({ sn: '' })
-        expect(domHtml(parentElem)).toBe('<child><span>456</span></child>')
+        expect(domHtml(parentElem)).toBe('<child is=""><span>456</span></child>')
         matchElementWithDom(parentElem)
 
         childElem.setData({ sn: 'def' })
-        expect(domHtml(parentElem)).toBe('<child></child>')
+        expect(domHtml(parentElem)).toBe('<child is=""></child>')
         matchElementWithDom(parentElem)
 
         childElem.setData({ sn: 'abc' })
-        expect(domHtml(parentElem)).toBe('<child><div>123</div></child>')
+        expect(domHtml(parentElem)).toBe('<child is=""><div>123</div></child>')
         matchElementWithDom(parentElem)
       })
 
@@ -588,7 +588,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
 
         glassEasel.Element.pretendAttached(parentElem)
         expect(domHtml(parentElem)).toBe(
-          '<child><c1><a></a></c1><c2><a></a></c2><c3><a></a></c3></child>',
+          '<child is=""><c1 is=""><a></a></c1><c2 is=""><a></a></c2><c3 is=""><a></a></c3></child>',
         )
         expect(ops).toEqual([
           [-1, '1:A'],
@@ -601,7 +601,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         ops = []
         parentElem.setData({ enableA1: true })
         expect(domHtml(parentElem)).toBe(
-          '<child><c1><x>A</x><x>B</x><a></a></c1><c2><x>A</x><x>B</x><a></a></c2><c3><x>A</x><x>B</x><a></a></c3></child>',
+          '<child is=""><c1 is=""><x is="">A</x><x is="">B</x><a></a></c1><c2 is=""><x is="">A</x><x is="">B</x><a></a></c2><c3 is=""><x is="">A</x><x is="">B</x><a></a></c3></child>',
         )
         expect(ops).toEqual([
           [-1, '3:A'],
@@ -612,7 +612,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         ops = []
         parentElem.setData({ slotName2: 'a2' })
         expect(domHtml(parentElem)).toBe(
-          '<child><c1><x>A</x><x>B</x><a></a></c1><c2><x>A</x><a></a></c2><c3><x>A</x><a></a></c3></child>',
+          '<child is=""><c1 is=""><x is="">A</x><x is="">B</x><a></a></c1><c2 is=""><x is="">A</x><a></a></c2><c3 is=""><x is="">A</x><a></a></c3></child>',
         )
         expect(ops).toEqual([[-2, '3:B']])
         matchElementWithDom(parentElem)
@@ -620,7 +620,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         ops = []
         parentElem.setData({ enableA2: true })
         expect(domHtml(parentElem)).toBe(
-          '<child><c1><x>A</x><x>B</x><a></a></c1><c2><x>A</x><a><x>B</x></a></c2><c3><x>A</x><a><x>B</x><x>B</x></a></c3></child>',
+          '<child is=""><c1 is=""><x is="">A</x><x is="">B</x><a></a></c1><c2 is=""><x is="">A</x><a><x is="">B</x></a></c2><c3 is=""><x is="">A</x><a><x is="">B</x><x is="">B</x></a></c3></child>',
         )
         expect(ops).toEqual([
           [-1, '3:B'],
@@ -631,7 +631,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         ops = []
         parentElem.setData({ enableA1: false })
         expect(domHtml(parentElem)).toBe(
-          '<child><c1><a><x>A</x><x>B</x></a></c1><c2><a><x>B</x></a></c2><c3><a><x>B</x><x>B</x></a></c3></child>',
+          '<child is=""><c1 is=""><a><x is="">A</x><x is="">B</x></a></c1><c2 is=""><a><x is="">B</x></a></c2><c3 is=""><a><x is="">B</x><x is="">B</x></a></c3></child>',
         )
         expect(ops).toEqual([[-2, '3:A']])
         matchElementWithDom(parentElem)
@@ -639,7 +639,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         ops = []
         parentElem.setData({ duplicateSlots: true })
         expect(domHtml(parentElem)).toBe(
-          '<child><c1><a><x>A</x><x>B</x></a></c1><c2><a><x>B</x></a></c2><c3><a><x>B</x><x>B</x></a></c3><c1><a><x>A</x><x>B</x></a></c1><c2><a><x>B</x></a></c2><c3><a><x>B</x><x>B</x></a></c3></child>',
+          '<child is=""><c1 is=""><a><x is="">A</x><x is="">B</x></a></c1><c2 is=""><a><x is="">B</x></a></c2><c3 is=""><a><x is="">B</x><x is="">B</x></a></c3><c1 is=""><a><x is="">A</x><x is="">B</x></a></c1><c2 is=""><a><x is="">B</x></a></c2><c3 is=""><a><x is="">B</x><x is="">B</x></a></c3></child>',
         )
         expect(ops).toEqual([
           [-1, '1:A'],
@@ -654,7 +654,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         ops = []
         parentElem.setData({ slotName1: 'a2' })
         expect(domHtml(parentElem)).toBe(
-          '<child><c1><a><x>A</x><x>B</x></a></c1><c2><a><x>A</x><x>B</x></a></c2><c3><a><x>A</x><x>B</x><x>A</x><x>B</x></a></c3><c1><a><x>A</x><x>B</x></a></c1><c2><a><x>A</x><x>B</x></a></c2><c3><a><x>A</x><x>B</x><x>A</x><x>B</x></a></c3></child>',
+          '<child is=""><c1 is=""><a><x is="">A</x><x is="">B</x></a></c1><c2 is=""><a><x is="">A</x><x is="">B</x></a></c2><c3 is=""><a><x is="">A</x><x is="">B</x><x is="">A</x><x is="">B</x></a></c3><c1 is=""><a><x is="">A</x><x is="">B</x></a></c1><c2 is=""><a><x is="">A</x><x is="">B</x></a></c2><c3 is=""><a><x is="">A</x><x is="">B</x><x is="">A</x><x is="">B</x></a></c3></child>',
         )
         expect(ops).toEqual([
           [-1, '3:A'],
@@ -667,7 +667,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         ops = []
         parentElem.setData({ enableA2: false })
         expect(domHtml(parentElem)).toBe(
-          '<child><c1><a></a></c1><c2><a></a></c2><c3><a></a></c3><c1><a></a></c1><c2><a></a></c2><c3><a></a></c3></child>',
+          '<child is=""><c1 is=""><a></a></c1><c2 is=""><a></a></c2><c3 is=""><a></a></c3><c1 is=""><a></a></c1><c2 is=""><a></a></c2><c3 is=""><a></a></c3></child>',
         )
         expect(ops).toEqual([
           [-2, '3:A'],
@@ -684,7 +684,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         ops = []
         parentElem.setData({ enableA1: true })
         expect(domHtml(parentElem)).toBe(
-          '<child><c1><x>A</x><x>B</x><a></a></c1><c2><a></a></c2><c3><a></a></c3><c1><x>A</x><x>B</x><a></a></c1><c2><a></a></c2><c3><a></a></c3></child>',
+          '<child is=""><c1 is=""><x is="">A</x><x is="">B</x><a></a></c1><c2 is=""><a></a></c2><c3 is=""><a></a></c3><c1 is=""><x is="">A</x><x is="">B</x><a></a></c1><c2 is=""><a></a></c2><c3 is=""><a></a></c3></child>',
         )
         expect(ops).toEqual([])
         matchElementWithDom(parentElem)
@@ -692,7 +692,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         ops = []
         parentElem.setData({ slotName1: 'a1' })
         expect(domHtml(parentElem)).toBe(
-          '<child><c1><x>A</x><x>B</x><a></a></c1><c2><x>A</x><a></a></c2><c3><x>A</x><a></a></c3><c1><x>A</x><x>B</x><a></a></c1><c2><x>A</x><a></a></c2><c3><x>A</x><a></a></c3></child>',
+          '<child is=""><c1 is=""><x is="">A</x><x is="">B</x><a></a></c1><c2 is=""><x is="">A</x><a></a></c2><c3 is=""><x is="">A</x><a></a></c3><c1 is=""><x is="">A</x><x is="">B</x><a></a></c1><c2 is=""><x is="">A</x><a></a></c2><c3 is=""><x is="">A</x><a></a></c3></child>',
         )
         expect(ops).toEqual([
           [-1, '3:A'],
@@ -703,7 +703,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         ops = []
         parentElem.setData({ slotContent1: 'C' })
         expect(domHtml(parentElem)).toBe(
-          '<child><c1><x>C</x><x>B</x><a></a></c1><c2><x>C</x><a></a></c2><c3><x>C</x><a></a></c3><c1><x>C</x><x>B</x><a></a></c1><c2><x>C</x><a></a></c2><c3><x>C</x><a></a></c3></child>',
+          '<child is=""><c1 is=""><x is="">C</x><x is="">B</x><a></a></c1><c2 is=""><x is="">C</x><a></a></c2><c3 is=""><x is="">C</x><a></a></c3><c1 is=""><x is="">C</x><x is="">B</x><a></a></c1><c2 is=""><x is="">C</x><a></a></c2><c3 is=""><x is="">C</x><a></a></c3></child>',
         )
         expect(ops).toEqual([])
         matchElementWithDom(parentElem)
@@ -711,7 +711,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         ops = []
         parentElem.setData({ duplicateSlots: false })
         expect(domHtml(parentElem)).toBe(
-          '<child><c1><x>C</x><x>B</x><a></a></c1><c2><x>C</x><a></a></c2><c3><x>C</x><a></a></c3></child>',
+          '<child is=""><c1 is=""><x is="">C</x><x is="">B</x><a></a></c1><c2 is=""><x is="">C</x><a></a></c2><c3 is=""><x is="">C</x><a></a></c3></child>',
         )
         expect(ops).toEqual([
           [-2, '1:C'],
@@ -847,7 +847,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         ).asInstanceOf(parent)!
 
         glassEasel.Element.pretendAttached(parentElem)
-        expect(domHtml(parentElem)).toBe('<c1><a></a></c1><c2><a></a></c2><c3><a></a></c3>')
+        expect(domHtml(parentElem)).toBe('<c1 is=""><a></a></c1><c2 is=""><a></a></c2><c3 is=""><a></a></c3>')
         expect(ops).toEqual([
           [-1, '1:A'],
           [-1, '1:B'],
@@ -859,7 +859,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         ops = []
         parentElem.setData({ enableA1: true })
         expect(domHtml(parentElem)).toBe(
-          '<c1><child><x>A</x><x>B</x></child><a></a></c1><c2><child><x>A</x><x>B</x></child><a></a></c2><c3><child><x>A</x><x>B</x></child><a></a></c3>',
+          '<c1 is=""><child is=""><x is="">A</x><x is="">B</x></child><a></a></c1><c2 is=""><child is=""><x is="">A</x><x is="">B</x></child><a></a></c2><c3 is=""><child is=""><x is="">A</x><x is="">B</x></child><a></a></c3>',
         )
         expect(ops).toEqual([
           [-1, '3:A'],
@@ -870,7 +870,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         ops = []
         parentElem.setData({ slotName2: 'b2' })
         expect(domHtml(parentElem)).toBe(
-          '<c1><child><x>A</x><x>B</x><x>B</x></child><a></a></c1><c2><child><x>A</x><x>B</x><x>B</x></child><a></a></c2><c3><child><x>A</x><x>B</x><x>B</x></child><a></a></c3>',
+          '<c1 is=""><child is=""><x is="">A</x><x is="">B</x><x is="">B</x></child><a></a></c1><c2 is=""><child is=""><x is="">A</x><x is="">B</x><x is="">B</x></child><a></a></c2><c3 is=""><child is=""><x is="">A</x><x is="">B</x><x is="">B</x></child><a></a></c3>',
         )
         expect(ops).toEqual([
           [-2, '1:B'],
@@ -888,7 +888,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         ops = []
         parentElem.setData({ enableA2: true })
         expect(domHtml(parentElem)).toBe(
-          '<c1><child><x>A</x><x>B</x><x>B</x></child><a></a></c1><c2><child><x>A</x><x>B</x><x>B</x></child><a></a></c2><c3><child><x>A</x><x>B</x><x>B</x></child><a></a></c3>',
+          '<c1 is=""><child is=""><x is="">A</x><x is="">B</x><x is="">B</x></child><a></a></c1><c2 is=""><child is=""><x is="">A</x><x is="">B</x><x is="">B</x></child><a></a></c2><c3 is=""><child is=""><x is="">A</x><x is="">B</x><x is="">B</x></child><a></a></c3>',
         )
         expect(ops).toEqual([])
         matchElementWithDom(parentElem)
@@ -896,7 +896,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         ops = []
         parentElem.setData({ childSlotName: 'a2' })
         expect(domHtml(parentElem)).toBe(
-          '<c1><child><x>A</x><x>B</x><x>B</x></child><a></a></c1><c2><a><child><x>A</x><x>B</x><x>B</x></child></a></c2><c3><a><child><x>A</x><x>B</x><x>B</x></child><child><x>A</x><x>B</x><x>B</x></child></a></c3>',
+          '<c1 is=""><child is=""><x is="">A</x><x is="">B</x><x is="">B</x></child><a></a></c1><c2 is=""><a><child is=""><x is="">A</x><x is="">B</x><x is="">B</x></child></a></c2><c3 is=""><a><child is=""><x is="">A</x><x is="">B</x><x is="">B</x></child><child is=""><x is="">A</x><x is="">B</x><x is="">B</x></child></a></c3>',
         )
         expect(ops).toEqual([
           [-2, '3:A'],
@@ -914,7 +914,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         ops = []
         parentElem.setData({ slotName1: 'b2' })
         expect(domHtml(parentElem)).toBe(
-          '<c1><child><x>A</x><x>B</x><x>A</x><x>B</x></child><a></a></c1><c2><a><child><x>A</x><x>B</x><x>A</x><x>B</x></child></a></c2><c3><a><child><x>A</x><x>B</x><x>A</x><x>B</x></child><child><x>A</x><x>B</x><x>A</x><x>B</x></child></a></c3>',
+          '<c1 is=""><child is=""><x is="">A</x><x is="">B</x><x is="">A</x><x is="">B</x></child><a></a></c1><c2 is=""><a><child is=""><x is="">A</x><x is="">B</x><x is="">A</x><x is="">B</x></child></a></c2><c3 is=""><a><child is=""><x is="">A</x><x is="">B</x><x is="">A</x><x is="">B</x></child><child is=""><x is="">A</x><x is="">B</x><x is="">A</x><x is="">B</x></child></a></c3>',
         )
         expect(ops).toEqual([
           [-2, '1:A'],
@@ -935,7 +935,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         ops = []
         parentElem.setData({ slotContent1: 'C' })
         expect(domHtml(parentElem)).toBe(
-          '<c1><child><x>C</x><x>B</x><x>C</x><x>B</x></child><a></a></c1><c2><a><child><x>C</x><x>B</x><x>C</x><x>B</x></child></a></c2><c3><a><child><x>C</x><x>B</x><x>C</x><x>B</x></child><child><x>C</x><x>B</x><x>C</x><x>B</x></child></a></c3>',
+          '<c1 is=""><child is=""><x is="">C</x><x is="">B</x><x is="">C</x><x is="">B</x></child><a></a></c1><c2 is=""><a><child is=""><x is="">C</x><x is="">B</x><x is="">C</x><x is="">B</x></child></a></c2><c3 is=""><a><child is=""><x is="">C</x><x is="">B</x><x is="">C</x><x is="">B</x></child><child is=""><x is="">C</x><x is="">B</x><x is="">C</x><x is="">B</x></child></a></c3>',
         )
         expect(ops).toEqual([])
         matchElementWithDom(parentElem)
@@ -943,7 +943,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         ops = []
         parentElem.setData({ enableA2: false, childSlotName: 'a1' })
         expect(domHtml(parentElem)).toBe(
-          '<c1><child><x>C</x><x>B</x><x>C</x><x>B</x></child><a></a></c1><c2><child><x>C</x><x>B</x><x>C</x><x>B</x></child><a></a></c2><c3><child><x>C</x><x>B</x><x>C</x><x>B</x></child><a></a></c3>',
+          '<c1 is=""><child is=""><x is="">C</x><x is="">B</x><x is="">C</x><x is="">B</x></child><a></a></c1><c2 is=""><child is=""><x is="">C</x><x is="">B</x><x is="">C</x><x is="">B</x></child><a></a></c2><c3 is=""><child is=""><x is="">C</x><x is="">B</x><x is="">C</x><x is="">B</x></child><a></a></c3>',
         )
         expect(ops).toEqual([
           [-1, '3:C'],
@@ -963,7 +963,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
 
         ops = []
         parentElem.setData({ enableA1: false })
-        expect(domHtml(parentElem)).toBe('<c1><a></a></c1><c2><a></a></c2><c3><a></a></c3>')
+        expect(domHtml(parentElem)).toBe('<c1 is=""><a></a></c1><c2 is=""><a></a></c2><c3 is=""><a></a></c3>')
         expect(ops).toEqual([
           [-2, '3:C'],
           [-2, '3:B'],
@@ -1005,7 +1005,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           .usingComponents({ child, 'x-c': subComp })
           .definition({
             template: tmpl(`
-              <child>
+              <child is="">
                 <block slot:a="foo" slot:c="bar">
                   <x-c prop-a="{{ foo.b[bar] }}">{{ foo.b[bar] }}</x-c>
                 </block>
@@ -1023,7 +1023,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         const childElem = parentElem.getShadowRoot()!.childNodes[0]!.asInstanceOf(child)!
 
         expect(domHtml(parentElem)).toBe(
-          '<child><x-c>10</x-c><span>0</span><x-c>20</x-c><span>0</span></child>',
+          '<child is=""><x-c is="">10</x-c><span>0</span><x-c is="">20</x-c><span>0</span></child>',
         )
         expect(updateCount).toBe(2)
         matchElementWithDom(parentElem)
@@ -1031,7 +1031,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         childElem.replaceDataOnPath(['a1', 'b', 0], 11)
         childElem.applyDataUpdates()
         expect(domHtml(parentElem)).toBe(
-          '<child><x-c>11</x-c><span>0</span><x-c>20</x-c><span>0</span></child>',
+          '<child is=""><x-c is="">11</x-c><span>0</span><x-c is="">20</x-c><span>0</span></child>',
         )
         expect(updateCount).toBe(3)
         matchElementWithDom(parentElem)
@@ -1040,7 +1040,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         childElem.replaceDataOnPath(['a2', 'b', 0], 21)
         childElem.applyDataUpdates()
         expect(domHtml(parentElem)).toBe(
-          '<child><x-c>12</x-c><span>0</span><x-c>21</x-c><span>0</span></child>',
+          '<child is=""><x-c is="">12</x-c><span>0</span><x-c is="">21</x-c><span>0</span></child>',
         )
         expect(updateCount).toBe(5)
         matchElementWithDom(parentElem)
@@ -1048,14 +1048,14 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         childElem.replaceDataOnPath(['a2', 'b', 1], 201)
         childElem.applyDataUpdates()
         expect(domHtml(parentElem)).toBe(
-          '<child><x-c>12</x-c><span>0</span><x-c>21</x-c><span>0</span></child>',
+          '<child is=""><x-c is="">12</x-c><span>0</span><x-c is="">21</x-c><span>0</span></child>',
         )
         expect(updateCount).toBe(6)
         matchElementWithDom(parentElem)
 
         childElem.setData({ c: 1 })
         expect(domHtml(parentElem)).toBe(
-          '<child><x-c>100</x-c><span>1</span><x-c>201</x-c><span>1</span></child>',
+          '<child is=""><x-c is="">100</x-c><span>1</span><x-c is="">201</x-c><span>1</span></child>',
         )
         expect(updateCount).toBe(8)
         matchElementWithDom(parentElem)
@@ -1106,7 +1106,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           .definition({
             template: tmpl(`
               <x-c s="{{a.foo}}" />
-              <child>
+              <child is="">
                 <x-c slot:item slot:index s="{{index}}:{{item}}">{{index}}:{{item}}</x-c>
               </child>
             `),
@@ -1119,7 +1119,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
 
         parentElem.replaceDataOnPath(['a', 'foo'], 'oops')
 
-        expect(domHtml(parentElem)).toBe('<x-c></x-c><child></child>')
+        expect(domHtml(parentElem)).toBe('<x-c is=""></x-c><child is=""></child>')
         expect(ops).toEqual([
           [0, 'foo'],
           [-1, 'foo'],
@@ -1129,7 +1129,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         ops = []
         childElem.setData({ items: [1, 2, 3] })
         expect(domHtml(parentElem)).toBe(
-          '<x-c></x-c><child><x-c>0:1</x-c><x-c>1:2</x-c><x-c>2:3</x-c></child>',
+          '<x-c is=""></x-c><child is=""><x-c is="">0:1</x-c><x-c is="">1:2</x-c><x-c is="">2:3</x-c></child>',
         )
         expect(ops).toEqual([
           [0, '0:1'],
@@ -1155,7 +1155,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           [-1, '2:6'],
         ])
         expect(domHtml(parentElem)).toBe(
-          '<x-c></x-c><child><x-c>0:4</x-c><x-c>1:5</x-c><x-c>2:6</x-c></child>',
+          '<x-c is=""></x-c><child is=""><x-c is="">0:4</x-c><x-c is="">1:5</x-c><x-c is="">2:6</x-c></child>',
         )
         matchElementWithDom(parentElem)
 
@@ -1172,7 +1172,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           [-1, '5:2'],
         ])
         expect(domHtml(parentElem)).toBe(
-          '<x-c></x-c><child><x-c>0:1</x-c><x-c>1:4</x-c><x-c>2:6</x-c><x-c>3:3</x-c><x-c>4:5</x-c><x-c>5:2</x-c></child>',
+          '<x-c is=""></x-c><child is=""><x-c is="">0:1</x-c><x-c is="">1:4</x-c><x-c is="">2:6</x-c><x-c is="">3:3</x-c><x-c is="">4:5</x-c><x-c is="">5:2</x-c></child>',
         )
         matchElementWithDom(parentElem)
 
@@ -1187,7 +1187,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           [0, '5:3'],
         ])
         expect(domHtml(parentElem)).toBe(
-          '<x-c></x-c><child><x-c>0:2</x-c><x-c>1:5</x-c><x-c>2:1</x-c><x-c>3:4</x-c><x-c>4:6</x-c><x-c>5:3</x-c></child>',
+          '<x-c is=""></x-c><child is=""><x-c is="">0:2</x-c><x-c is="">1:5</x-c><x-c is="">2:1</x-c><x-c is="">3:4</x-c><x-c is="">4:6</x-c><x-c is="">5:3</x-c></child>',
         )
         matchElementWithDom(parentElem)
 
@@ -1202,7 +1202,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           [0, '5:2'],
         ])
         expect(domHtml(parentElem)).toBe(
-          '<x-c></x-c><child><x-c>0:1</x-c><x-c>1:4</x-c><x-c>2:6</x-c><x-c>3:3</x-c><x-c>4:5</x-c><x-c>5:2</x-c></child>',
+          '<x-c is=""></x-c><child is=""><x-c is="">0:1</x-c><x-c is="">1:4</x-c><x-c is="">2:6</x-c><x-c is="">3:3</x-c><x-c is="">4:5</x-c><x-c is="">5:2</x-c></child>',
         )
         matchElementWithDom(parentElem)
 
@@ -1216,7 +1216,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           [0, '4:2'],
         ])
         expect(domHtml(parentElem)).toBe(
-          '<x-c></x-c><child><x-c>0:1</x-c><x-c>1:4</x-c><x-c>2:3</x-c><x-c>3:5</x-c><x-c>4:2</x-c></child>',
+          '<x-c is=""></x-c><child is=""><x-c is="">0:1</x-c><x-c is="">1:4</x-c><x-c is="">2:3</x-c><x-c is="">3:5</x-c><x-c is="">4:2</x-c></child>',
         )
         matchElementWithDom(parentElem)
 
@@ -1231,7 +1231,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           [0, '5:2'],
         ])
         expect(domHtml(parentElem)).toBe(
-          '<x-c></x-c><child><x-c>0:1</x-c><x-c>1:4</x-c><x-c>2:6</x-c><x-c>3:3</x-c><x-c>4:5</x-c><x-c>5:2</x-c></child>',
+          '<x-c is=""></x-c><child is=""><x-c is="">0:1</x-c><x-c is="">1:4</x-c><x-c is="">2:6</x-c><x-c is="">3:3</x-c><x-c is="">4:5</x-c><x-c is="">5:2</x-c></child>',
         )
         matchElementWithDom(parentElem)
 
@@ -1245,7 +1245,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           [-2, '5:2'],
           [-2, '2:6'],
         ])
-        expect(domHtml(parentElem)).toBe('<x-c></x-c><child></child>')
+        expect(domHtml(parentElem)).toBe('<x-c is=""></x-c><child is=""></child>')
         matchElementWithDom(parentElem)
 
         ops = []
@@ -1313,21 +1313,21 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         const noneElem = parentElem.getShadowRoot()!.childNodes[0]!.asInstanceOf(none)!
         const recElem = parentElem.getShadowRoot()!.childNodes[1]!.asInstanceOf(rec)!
 
-        expect(domHtml(parentElem)).toBe('<none><div>123</div></none><rec><div>abc</div></rec>')
+        expect(domHtml(parentElem)).toBe('<none is=""><div>123</div></none><rec is=""><div>abc</div></rec>')
         matchElementWithDom(parentElem)
 
         noneElem.setData({ 'sp.text': 456 })
-        expect(domHtml(parentElem)).toBe('<none><div>123</div></none><rec><div>abc</div></rec>')
+        expect(domHtml(parentElem)).toBe('<none is=""><div>123</div></none><rec is=""><div>abc</div></rec>')
         matchElementWithDom(parentElem)
 
         noneElem.setData({ sp: { text: 789 } })
-        expect(domHtml(parentElem)).toBe('<none><div>789</div></none><rec><div>abc</div></rec>')
+        expect(domHtml(parentElem)).toBe('<none is=""><div>789</div></none><rec is=""><div>abc</div></rec>')
         matchElementWithDom(parentElem)
 
         const recObj = {} as { r: any }
         recObj.r = recObj
         recElem.setData({ sp: { text: 'def' }, recObj })
-        expect(domHtml(parentElem)).toBe('<none><div>789</div></none><rec><div>def</div></rec>')
+        expect(domHtml(parentElem)).toBe('<none is=""><div>789</div></none><rec is=""><div>def</div></rec>')
         matchElementWithDom(parentElem)
       })
 
@@ -1371,7 +1371,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           testBackend,
         )
 
-        expect(domHtml(parentElem)).toBe('<impl><div><div>123</div></div></impl>')
+        expect(domHtml(parentElem)).toBe('<impl is=""><div><div>123</div></div></impl>')
         matchElementWithDom(parentElem)
 
         componentSpace
@@ -1391,7 +1391,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           }))
           .registerComponent()
 
-        expect(domHtml(parentElem)).toBe('<impl><span><div>456</div></span></impl>')
+        expect(domHtml(parentElem)).toBe('<impl is="impl"><span><div>456</div></span></impl>')
         matchElementWithDom(parentElem)
       })
 
@@ -1417,7 +1417,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           .usingComponents({ comp })
           .template(
             tmpl(`
-              <comp>
+              <comp is="">
                 <div>child</div>
                 <slot name="child-slot" slot="{{s}}" />
               </comp>
@@ -1446,19 +1446,19 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           parent.general(),
           testBackend,
         )
-        expect(domHtml(parentElem)).toBe('<child><comp><div>comp</div></comp></child>')
+        expect(domHtml(parentElem)).toBe('<child is=""><comp is=""><div>comp</div></comp></child>')
 
         parentElem.setData({
           s: 'comp-slot',
         })
         expect(domHtml(parentElem)).toBe(
-          '<child><comp><div>comp</div><div>content</div></comp></child>',
+          '<child is=""><comp is=""><div>comp</div><div>content</div></comp></child>',
         )
 
         parentElem.setData({
           s: 'invalid',
         })
-        expect(domHtml(parentElem)).toBe('<child><comp><div>comp</div></comp></child>')
+        expect(domHtml(parentElem)).toBe('<child is=""><comp is=""><div>comp</div></comp></child>')
       })
 
       test('should support slot as slot content with virtual host and placeholder', () => {
@@ -1486,7 +1486,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           .placeholders({ comp: 'placeholder' })
           .template(
             tmpl(`
-              <comp>
+              <comp is="">
                 <div>child</div>
                 <slot name="content" slot="content" />
               </comp>
@@ -1499,7 +1499,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           .usingComponents({ child })
           .template(
             tmpl(`
-              <child>
+              <child is="">
                 <div slot="content">content</div>
               </child>
             `),
@@ -1526,7 +1526,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           )
           .registerComponent()
 
-        expect(domHtml(parentElem)).toBe('<comp><div>comp</div><div>content</div></comp>')
+        expect(domHtml(parentElem)).toBe('<comp is="comp"><div>comp</div><div>content</div></comp>')
       })
     })
   })
diff --git a/glass-easel/tests/core/trait_behaviors.test.ts b/glass-easel/tests/core/trait_behaviors.test.ts
index 09c5e88..d1d0528 100644
--- a/glass-easel/tests/core/trait_behaviors.test.ts
+++ b/glass-easel/tests/core/trait_behaviors.test.ts
@@ -154,6 +154,8 @@ describe('trait behaviors', () => {
     const comp = glassEasel.Component.createWithContext('root', compDef, domBackend)
     glassEasel.Element.pretendAttached(comp)
     expect(eventArr).toStrictEqual([1, 2, 1, 2, 1, 2])
-    expect(domHtml(comp)).toBe('<parent><child>A</child><child>B</child><child>C</child></parent>')
+    expect(domHtml(comp)).toBe(
+      '<parent is=""><child is="">A</child><child is="">B</child><child is="">C</child></parent>',
+    )
   })
 })
diff --git a/glass-easel/tests/tmpl/binding_map.test.ts b/glass-easel/tests/tmpl/binding_map.test.ts
index df2b2b9..6a83999 100644
--- a/glass-easel/tests/tmpl/binding_map.test.ts
+++ b/glass-easel/tests/tmpl/binding_map.test.ts
@@ -59,15 +59,15 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       })
       const elem = glassEasel.Component.createWithContext('root', def, testBackend)
       const comp = elem.getShadowRoot()!.getElementById('comp') as glassEasel.GeneralComponent
-      expect(domHtml(elem)).toBe('<comp><div>123</div>B</comp>')
+      expect(domHtml(elem)).toBe('<comp is=""><div>123</div>B</comp>')
       comp.setData({ propA: 789 })
-      expect(domHtml(elem)).toBe('<comp><div>789</div>B</comp>')
+      expect(domHtml(elem)).toBe('<comp is=""><div>789</div>B</comp>')
       expect(elem.data.list).toEqual([{ a: 789 }, { a: 456 }])
       elem.setData({ index: 1 })
-      expect(domHtml(elem)).toBe('<comp><div>456</div>C</comp>')
+      expect(domHtml(elem)).toBe('<comp is=""><div>456</div>C</comp>')
       expect(elem.data.list).toEqual([{ a: 789 }, { a: 456 }])
       comp.setData({ propA: 123 })
-      expect(domHtml(elem)).toBe('<comp><div>123</div>C</comp>')
+      expect(domHtml(elem)).toBe('<comp is=""><div>123</div>C</comp>')
       expect(elem.data.list).toEqual([{ a: 789 }, { a: 123 }])
     })
   })
@@ -102,9 +102,9 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       const child = (
         elem.getShadowRoot()!.childNodes[0] as glassEasel.GeneralComponent
       ).asInstanceOf(subComp)!
-      expect(domHtml(elem)).toBe('<sub-comp><div>abc</div></sub-comp>')
+      expect(domHtml(elem)).toBe('<sub-comp is=""><div>abc</div></sub-comp>')
       elem.setData({ c: 'def' })
-      expect(domHtml(elem)).toBe('<sub-comp><div>def</div></sub-comp>')
+      expect(domHtml(elem)).toBe('<sub-comp is=""><div>def</div></sub-comp>')
       child.setData({ propA: 456 })
       expect(elem.data.a).toBe(456)
       child.setData({ propA: 789 })
diff --git a/glass-easel/tests/tmpl/lvalue.test.ts b/glass-easel/tests/tmpl/lvalue.test.ts
index 8eb25e3..c44d6e6 100644
--- a/glass-easel/tests/tmpl/lvalue.test.ts
+++ b/glass-easel/tests/tmpl/lvalue.test.ts
@@ -40,26 +40,26 @@ describe('model value binding', () => {
     })
     const elem = glassEasel.Component.createWithContext('root', def, domBackend)
     const comp = elem.getShadowRoot()!.getElementById('comp')! as glassEasel.GeneralComponent
-    expect(domHtml(elem)).toBe('<comp><div>10</div></comp>')
+    expect(domHtml(elem)).toBe('<comp is=""><div>10</div></comp>')
     expect(updateCount).toBe(1)
     expect(comp.getShadowRoot()!.getElementById('a')!.dataset.a).toBe(10)
     comp.setData({ propA: 20 })
-    expect(domHtml(elem)).toBe('<comp><div>20</div></comp>')
+    expect(domHtml(elem)).toBe('<comp is=""><div>20</div></comp>')
     expect(updateCount).toBe(3)
     expect(comp.getShadowRoot()!.getElementById('a')!.dataset.a).toBe(20)
     expect(elem.data.a).toEqual({ b: [20, 100] })
     elem.setData({ 'a.b[0]': 30 })
-    expect(domHtml(elem)).toBe('<comp><div>30</div></comp>')
+    expect(domHtml(elem)).toBe('<comp is=""><div>30</div></comp>')
     expect(updateCount).toBe(4)
     expect(comp.getShadowRoot()!.getElementById('a')!.dataset.a).toBe(30)
     elem.setData({ 'a.b[1]': 200 })
     expect(updateCount).toBe(4)
     elem.setData({ c: 1 })
-    expect(domHtml(elem)).toBe('<comp><div>200</div></comp>')
+    expect(domHtml(elem)).toBe('<comp is=""><div>200</div></comp>')
     expect(updateCount).toBe(5)
     expect(comp.getShadowRoot()!.getElementById('a')!.dataset.a).toBe(200)
     comp.setData({ propA: 300 })
-    expect(domHtml(elem)).toBe('<comp><div>300</div></comp>')
+    expect(domHtml(elem)).toBe('<comp is=""><div>300</div></comp>')
     expect(updateCount).toBe(7)
     expect(comp.getShadowRoot()!.getElementById('a')!.dataset.a).toBe(300)
     expect(elem.data.a).toEqual({ b: [30, 300] })
@@ -169,21 +169,21 @@ describe('model value binding', () => {
     const elem = glassEasel.Component.createWithContext('root', def, domBackend)
     const comp0 = elem.getShadowRoot()!.getElementById('comp0')! as glassEasel.GeneralComponent
     const comp1 = elem.getShadowRoot()!.getElementById('comp1')! as glassEasel.GeneralComponent
-    expect(domHtml(elem)).toBe('<comp>123:X</comp><comp>456:Y</comp>')
+    expect(domHtml(elem)).toBe('<comp is="">123:X</comp><comp is="">456:Y</comp>')
     comp0.setData({ propA: 'X0', propB: 1230 })
-    expect(domHtml(elem)).toBe('<comp>1230:X0</comp><comp>456:Y</comp>')
+    expect(domHtml(elem)).toBe('<comp is="">1230:X0</comp><comp is="">456:Y</comp>')
     expect(elem.data.list).toEqual([
       { a: 'X0', b: 1230 },
       { a: 'Y', b: 456 },
     ])
     comp1.setData({ propA: 'Y0', propB: 4560 })
-    expect(domHtml(elem)).toBe('<comp>1230:X0</comp><comp>4560:Y0</comp>')
+    expect(domHtml(elem)).toBe('<comp is="">1230:X0</comp><comp is="">4560:Y0</comp>')
     expect(elem.data.list).toEqual([
       { a: 'X0', b: 1230 },
       { a: 'Y0', b: 4560 },
     ])
     elem.setData({ list: [{ a: 'Z', b: 789 }] })
-    expect(domHtml(elem)).toBe('<comp>789:Z</comp>')
+    expect(domHtml(elem)).toBe('<comp is="">789:Z</comp>')
   })
 
   test('invalid model value binding for items', () => {
@@ -210,9 +210,9 @@ describe('model value binding', () => {
     })
     const elem = glassEasel.Component.createWithContext('root', def, domBackend)
     const comp = elem.getShadowRoot()!.getElementById('comp')! as glassEasel.GeneralComponent
-    expect(domHtml(elem)).toBe('<comp>123</comp>')
+    expect(domHtml(elem)).toBe('<comp is="">123</comp>')
     comp.setData({ propA: 456 })
-    expect(domHtml(elem)).toBe('<comp>456</comp>')
+    expect(domHtml(elem)).toBe('<comp is="">456</comp>')
     expect(elem.data.list).toEqual([{ a: [123] }])
   })
 
@@ -237,11 +237,11 @@ describe('model value binding', () => {
     const elem = glassEasel.Component.createWithContext('root', def, domBackend)
     const comp0 = elem.getShadowRoot()!.getElementById('comp0')! as glassEasel.GeneralComponent
     const comp1 = elem.getShadowRoot()!.getElementById('comp1')! as glassEasel.GeneralComponent
-    expect(domHtml(elem)).toBe('<comp>123</comp><comp>456</comp>')
+    expect(domHtml(elem)).toBe('<comp is="">123</comp><comp is="">456</comp>')
     comp0.setData({ propA: 321 })
-    expect(domHtml(elem)).toBe('<comp>321</comp><comp>456</comp>')
+    expect(domHtml(elem)).toBe('<comp is="">321</comp><comp is="">456</comp>')
     comp1.setData({ propA: 654 })
-    expect(domHtml(elem)).toBe('<comp>321</comp><comp>654</comp>')
+    expect(domHtml(elem)).toBe('<comp is="">321</comp><comp is="">654</comp>')
   })
 
   test('nested model value bindings', () => {
@@ -278,19 +278,19 @@ describe('model value binding', () => {
     const elem = glassEasel.Component.createWithContext('root', def, domBackend)
     const compB = elem.getShadowRoot()!.getElementById('comp')!.asInstanceOf(subCompB)!
     const compA = compB.getShadowRoot()!.getElementById('comp')!.asInstanceOf(subCompA)!
-    expect(domHtml(elem)).toBe('<comp><comp><div>123</div></comp></comp>')
+    expect(domHtml(elem)).toBe('<comp is=""><comp is=""><div>123</div></comp></comp>')
     compA.setData({ propA: 45 })
-    expect(domHtml(elem)).toBe('<comp><comp><div>45</div></comp></comp>')
+    expect(domHtml(elem)).toBe('<comp is=""><comp is=""><div>45</div></comp></comp>')
     expect(elem.data.b).toBe(45)
     expect(compB.data.propB).toBe(45)
     expect(compA.data.propA).toBe(45)
     compB.setData({ propB: 67 })
-    expect(domHtml(elem)).toBe('<comp><comp><div>67</div></comp></comp>')
+    expect(domHtml(elem)).toBe('<comp is=""><comp is=""><div>67</div></comp></comp>')
     expect(elem.data.b).toBe(67)
     expect(compB.data.propB).toBe(67)
     expect(compA.data.propA).toBe(67)
     elem.setData({ b: 89 })
-    expect(domHtml(elem)).toBe('<comp><comp><div>89</div></comp></comp>')
+    expect(domHtml(elem)).toBe('<comp is=""><comp is=""><div>89</div></comp></comp>')
     expect(elem.data.b).toBe(89)
     expect(compB.data.propB).toBe(89)
     expect(compA.data.propA).toBe(89)
diff --git a/glass-easel/tests/tmpl/native_rendering.test.ts b/glass-easel/tests/tmpl/native_rendering.test.ts
index ae7c260..b27eef8 100644
--- a/glass-easel/tests/tmpl/native_rendering.test.ts
+++ b/glass-easel/tests/tmpl/native_rendering.test.ts
@@ -58,11 +58,11 @@ describe('native rendering mode', () => {
       },
     })
     const elem = glassEasel.Component.createWithContext('root', def.general(), domBackend)
-    expect(domHtml(elem)).toBe('<comp><div>2<span>1</span></div></comp>')
+    expect(domHtml(elem)).toBe('<comp is=""><div>2<span>1</span></div></comp>')
     elem.setData({
       c: 10,
     })
-    expect(domHtml(elem)).toBe('<comp><div>11<span>10</span></div></comp>')
+    expect(domHtml(elem)).toBe('<comp is=""><div>11<span>10</span></div></comp>')
   })
 
   test('slot appending', () => {
@@ -87,11 +87,11 @@ describe('native rendering mode', () => {
       },
     })
     const elem = glassEasel.Component.createWithContext('root', def.general(), domBackend)
-    expect(domHtml(elem)).toBe('<comp><div>cA<span></span></div><virtual>A</virtual></comp>')
+    expect(domHtml(elem)).toBe('<comp is=""><div>cA<span></span></div><virtual>A</virtual></comp>')
     elem.setData({
       c: 'B',
     })
-    expect(domHtml(elem)).toBe('<comp><div>cB<span></span></div><virtual>B</virtual></comp>')
+    expect(domHtml(elem)).toBe('<comp is=""><div>cB<span></span></div><virtual>B</virtual></comp>')
   })
 
   test('default template', () => {
@@ -110,11 +110,11 @@ describe('native rendering mode', () => {
       },
     })
     const elem = glassEasel.Component.createWithContext('root', def.general(), domBackend)
-    expect(domHtml(elem)).toBe('<comp>123</comp>')
+    expect(domHtml(elem)).toBe('<comp is="">123</comp>')
     elem.setData({
       c: 'ABC',
     })
-    expect(domHtml(elem)).toBe('<comp>ABC</comp>')
+    expect(domHtml(elem)).toBe('<comp is="">ABC</comp>')
   })
 
   test('event handling', () => {
diff --git a/glass-easel/tests/tmpl/structure.test.ts b/glass-easel/tests/tmpl/structure.test.ts
index 9bf1aad..a064a54 100644
--- a/glass-easel/tests/tmpl/structure.test.ts
+++ b/glass-easel/tests/tmpl/structure.test.ts
@@ -223,19 +223,19 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       .general()
     const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     const child = elem.getShadowRoot()!.getElementById('c')!.asInstanceOf(childComp)!
-    expect(domHtml(elem)).toBe('<child><div>A</div></child>')
+    expect(domHtml(elem)).toBe('<child is=""><div>A</div></child>')
     matchElementWithDom(elem)
     child.setData({
       cond1: false,
       cond2: true,
     })
-    expect(domHtml(elem)).toBe('<child><div>C</div></child>')
+    expect(domHtml(elem)).toBe('<child is=""><div>C</div></child>')
     matchElementWithDom(elem)
     child.setData({
       cond1: false,
       cond2: false,
     })
-    expect(domHtml(elem)).toBe('<child><span></span></child>')
+    expect(domHtml(elem)).toBe('<child is=""><span></span></child>')
     matchElementWithDom(elem)
   })
 
@@ -271,7 +271,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       .general()
     const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
-    expect(domHtml(elem)).toBe('<div><x-c>0</x-c></div><div><x-c>1</x-c></div>')
+    expect(domHtml(elem)).toBe('<div><x-c is="">0</x-c></div><div><x-c is="">1</x-c></div>')
     matchElementWithDom(elem)
     expect(ops).toEqual([
       [-1, '10'],
@@ -281,7 +281,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
     elem.setData({
       list: [20, 10],
     })
-    expect(domHtml(elem)).toBe('<div><x-c>0</x-c></div><div><x-c>1</x-c></div>')
+    expect(domHtml(elem)).toBe('<div><x-c is="">0</x-c></div><div><x-c is="">1</x-c></div>')
     matchElementWithDom(elem)
     expect(ops).toEqual([])
     ops.length = 0
@@ -289,7 +289,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       list: [30, 40, 50, 60],
     })
     expect(domHtml(elem)).toBe(
-      '<div><x-c>0</x-c></div><div><x-c>1</x-c></div><div><x-c>2</x-c></div><div><x-c>3</x-c></div>',
+      '<div><x-c is="">0</x-c></div><div><x-c is="">1</x-c></div><div><x-c is="">2</x-c></div><div><x-c is="">3</x-c></div>',
     )
     matchElementWithDom(elem)
     expect(ops).toEqual([
@@ -300,7 +300,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
     elem.setData({
       list: [50],
     })
-    expect(domHtml(elem)).toBe('<div><x-c>0</x-c></div>')
+    expect(domHtml(elem)).toBe('<div><x-c is="">0</x-c></div>')
     matchElementWithDom(elem)
     expect(ops).toEqual([
       [-2, '40'],
@@ -354,7 +354,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       }
     }
     glassEasel.Element.pretendAttached(elem)
-    expect(domHtml(elem)).toBe('<x-c>10</x-c><x-c>20</x-c>')
+    expect(domHtml(elem)).toBe('<x-c is="">10</x-c><x-c is="">20</x-c>')
     matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([
@@ -371,7 +371,9 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         { k: 'e', v: 70 },
       ],
     })
-    expect(domHtml(elem)).toBe('<x-c>30</x-c><x-c>40</x-c><x-c>50</x-c><x-c>60</x-c><x-c>70</x-c>')
+    expect(domHtml(elem)).toBe(
+      '<x-c is="">30</x-c><x-c is="">40</x-c><x-c is="">50</x-c><x-c is="">60</x-c><x-c is="">70</x-c>',
+    )
     matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([
@@ -389,7 +391,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         { k: 'e', v: 70 },
       ],
     })
-    expect(domHtml(elem)).toBe('<x-c>30</x-c><x-c>60</x-c><x-c>40</x-c><x-c>50</x-c><x-c>70</x-c>')
+    expect(domHtml(elem)).toBe('<x-c is="">30</x-c><x-c is="">60</x-c><x-c is="">40</x-c><x-c is="">50</x-c><x-c is="">70</x-c>')
     matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([[-3, 'b:60']])
@@ -403,7 +405,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         { k: 'a', v: 70 },
       ],
     })
-    expect(domHtml(elem)).toBe('<x-c>30</x-c><x-c>40</x-c><x-c>50</x-c><x-c>60</x-c><x-c>70</x-c>')
+    expect(domHtml(elem)).toBe('<x-c is="">30</x-c><x-c is="">40</x-c><x-c is="">50</x-c><x-c is="">60</x-c><x-c is="">70</x-c>')
     matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([[-3, 'a:40']])
@@ -417,7 +419,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         { k: 'a', v: 70 },
       ],
     })
-    expect(domHtml(elem)).toBe('<x-c>30</x-c><x-c>40</x-c><x-c>50</x-c><x-c>60</x-c><x-c>70</x-c>')
+    expect(domHtml(elem)).toBe('<x-c is="">30</x-c><x-c is="">40</x-c><x-c is="">50</x-c><x-c is="">60</x-c><x-c is="">70</x-c>')
     matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([])
@@ -428,7 +430,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         { k: 'e', v: 90 },
       ],
     })
-    expect(domHtml(elem)).toBe('<x-c>80</x-c><x-c>90</x-c>')
+    expect(domHtml(elem)).toBe('<x-c is="">80</x-c><x-c is="">90</x-c>')
     matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([
@@ -527,7 +529,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       .general()
     const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
-    expect(domHtml(elem)).toBe('<div><x-c>a</x-c></div><div><x-c>b</x-c></div>')
+    expect(domHtml(elem)).toBe('<div><x-c is="">a</x-c></div><div><x-c is="">b</x-c></div>')
     matchElementWithDom(elem)
     expect(ops).toEqual([
       [-1, 'a:10'],
@@ -537,7 +539,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
     elem.setData({
       list: { a: 20, b: 10 },
     })
-    expect(domHtml(elem)).toBe('<div><x-c>a</x-c></div><div><x-c>b</x-c></div>')
+    expect(domHtml(elem)).toBe('<div><x-c is="">a</x-c></div><div><x-c is="">b</x-c></div>')
     matchElementWithDom(elem)
     expect(ops).toEqual([])
     ops.length = 0
@@ -550,7 +552,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       },
     })
     expect(domHtml(elem)).toBe(
-      '<div><x-c>a</x-c></div><div><x-c>b</x-c></div><div><x-c>c</x-c></div><div><x-c>d</x-c></div>',
+      '<div><x-c is="">a</x-c></div><div><x-c is="">b</x-c></div><div><x-c is="">c</x-c></div><div><x-c is="">d</x-c></div>',
     )
     matchElementWithDom(elem)
     expect(ops).toEqual([
@@ -561,7 +563,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
     elem.setData({
       list: { c: 50 },
     })
-    expect(domHtml(elem)).toBe('<div><x-c>c</x-c></div>')
+    expect(domHtml(elem)).toBe('<div><x-c is="">c</x-c></div>')
     matchElementWithDom(elem)
     expect(ops).toEqual([
       [-2, 'b:40'],
@@ -612,7 +614,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       }
     }
     glassEasel.Element.pretendAttached(elem)
-    expect(domHtml(elem)).toBe('<x-c>10</x-c><x-c>20</x-c>')
+    expect(domHtml(elem)).toBe('<x-c is="">10</x-c><x-c is="">20</x-c>')
     matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([
@@ -631,7 +633,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       },
     })
     expect(domHtml(elem)).toBe(
-      '<x-c>30</x-c><x-c>40</x-c><x-c>50</x-c><x-c>60</x-c><x-c>70</x-c><x-c>80</x-c>',
+      '<x-c is="">30</x-c><x-c is="">40</x-c><x-c is="">50</x-c><x-c is="">60</x-c><x-c is="">70</x-c><x-c is="">80</x-c>',
     )
     matchElementWithDom(elem)
     checkIndex()
@@ -653,7 +655,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       },
     })
     expect(domHtml(elem)).toBe(
-      '<x-c>50</x-c><x-c>60</x-c><x-c>70</x-c><x-c>80</x-c><x-c>30</x-c><x-c>40</x-c>',
+      '<x-c is="">50</x-c><x-c is="">60</x-c><x-c is="">70</x-c><x-c is="">80</x-c><x-c is="">30</x-c><x-c is="">40</x-c>',
     )
     matchElementWithDom(elem)
     checkIndex()
@@ -673,7 +675,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         f2: { k: 'b', v: 50 },
       },
     })
-    expect(domHtml(elem)).toBe('<x-c>10</x-c><x-c>20</x-c><x-c>30</x-c><x-c>40</x-c><x-c>50</x-c>')
+    expect(domHtml(elem)).toBe('<x-c is="">10</x-c><x-c is="">20</x-c><x-c is="">30</x-c><x-c is="">40</x-c><x-c is="">50</x-c>')
     matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([
@@ -694,7 +696,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       },
     })
     expect(domHtml(elem)).toBe(
-      '<x-c>10</x-c><x-c>20</x-c><x-c>30</x-c><x-c>40</x-c><x-c>50</x-c><x-c>60</x-c><x-c>70</x-c>',
+      '<x-c is="">10</x-c><x-c is="">20</x-c><x-c is="">30</x-c><x-c is="">40</x-c><x-c is="">50</x-c><x-c is="">60</x-c><x-c is="">70</x-c>',
     )
     matchElementWithDom(elem)
     checkIndex()
@@ -716,7 +718,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       },
     })
     expect(domHtml(elem)).toBe(
-      '<x-c>60</x-c><x-c>50</x-c><x-c>40</x-c><x-c>30</x-c><x-c>20</x-c><x-c>10</x-c>',
+      '<x-c is="">60</x-c><x-c is="">50</x-c><x-c is="">40</x-c><x-c is="">30</x-c><x-c is="">20</x-c><x-c is="">10</x-c>',
     )
     matchElementWithDom(elem)
     checkIndex()
@@ -740,7 +742,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       },
     })
     expect(domHtml(elem)).toBe(
-      '<x-c>80</x-c><x-c>70</x-c><x-c>60</x-c><x-c>50</x-c><x-c>40</x-c><x-c>30</x-c><x-c>20</x-c><x-c>10</x-c>',
+      '<x-c is="">80</x-c><x-c is="">70</x-c><x-c is="">60</x-c><x-c is="">50</x-c><x-c is="">40</x-c><x-c is="">30</x-c><x-c is="">20</x-c><x-c is="">10</x-c>',
     )
     matchElementWithDom(elem)
     checkIndex()
@@ -790,7 +792,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       glassEasel.Component.createWithContext('root', def, testBackend),
     )
     glassEasel.Element.pretendAttached(elem)
-    expect(domHtml(elem)).toBe('<x-c>x</x-c>')
+    expect(domHtml(elem)).toBe('<x-c is="">x</x-c>')
     matchElementWithDom(elem)
     expect(ops).toEqual([[-1, 'x']])
     ops.length = 0
@@ -799,7 +801,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         s: 'abc',
       })
     })
-    expect(domHtml(elem)).toBe('<x-c>a</x-c><x-c>b</x-c><x-c>c</x-c>')
+    expect(domHtml(elem)).toBe('<x-c is="">a</x-c><x-c is="">b</x-c><x-c is="">c</x-c>')
     matchElementWithDom(elem)
     expect(ops).toEqual([
       [-2, 'x'],
@@ -813,7 +815,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         s: 'cab',
       })
     })
-    expect(domHtml(elem)).toBe('<x-c>c</x-c><x-c>a</x-c><x-c>b</x-c>')
+    expect(domHtml(elem)).toBe('<x-c is="">c</x-c><x-c is="">a</x-c><x-c is="">b</x-c>')
     matchElementWithDom(elem)
     ops.length = 0
     execWithWarn(1, () => {
@@ -867,27 +869,29 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
     })
     const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
-    expect(domHtml(elem)).toBe('<x><s>0</s><s>1</s><s>2</s></x>')
+    expect(domHtml(elem)).toBe('<x is=""><s>0</s><s>1</s><s>2</s></x>')
     matchElementWithDom(elem)
     elem.spliceArrayDataOnPath(['n'], 3, 0, [3, 4])
     elem.applyDataUpdates()
-    expect(domHtml(elem)).toBe('<x><s>0</s><s>1</s><s>2</s><s>3</s><s>4</s></x>')
+    expect(domHtml(elem)).toBe('<x is=""><s>0</s><s>1</s><s>2</s><s>3</s><s>4</s></x>')
     matchElementWithDom(elem)
     elem.spliceArrayDataOnPath(['n'], 0, 0, [5, 6])
     elem.applyDataUpdates()
-    expect(domHtml(elem)).toBe('<x><s>5</s><s>6</s><s>0</s><s>1</s><s>2</s><s>3</s><s>4</s></x>')
+    expect(domHtml(elem)).toBe(
+      '<x is=""><s>5</s><s>6</s><s>0</s><s>1</s><s>2</s><s>3</s><s>4</s></x>',
+    )
     matchElementWithDom(elem)
     elem.spliceArrayDataOnPath(['n'], 2, 3, [7, 8])
     elem.applyDataUpdates()
-    expect(domHtml(elem)).toBe('<x><s>5</s><s>6</s><s>7</s><s>8</s><s>3</s><s>4</s></x>')
+    expect(domHtml(elem)).toBe('<x is=""><s>5</s><s>6</s><s>7</s><s>8</s><s>3</s><s>4</s></x>')
     matchElementWithDom(elem)
     elem.spliceArrayDataOnPath(['n'], 0, 3, [])
     elem.applyDataUpdates()
-    expect(domHtml(elem)).toBe('<x><s>8</s><s>3</s><s>4</s></x>')
+    expect(domHtml(elem)).toBe('<x is=""><s>8</s><s>3</s><s>4</s></x>')
     matchElementWithDom(elem)
     elem.spliceArrayDataOnPath(['n'], 1, 2, [])
     elem.applyDataUpdates()
-    expect(domHtml(elem)).toBe('<x><s>8</s></x>')
+    expect(domHtml(elem)).toBe('<x is=""><s>8</s></x>')
     matchElementWithDom(elem)
   })
 
@@ -1327,12 +1331,12 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       .general()
     const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
-    expect(domHtml(elem)).toBe('<child-comp><div>123</div></child-comp>')
+    expect(domHtml(elem)).toBe('<child-comp is=""><div>123</div></child-comp>')
     matchElementWithDom(elem)
     elem.setData({
       d: '',
     })
-    expect(domHtml(elem)).toBe('<child-comp><div></div></child-comp>')
+    expect(domHtml(elem)).toBe('<child-comp is=""><div></div></child-comp>')
     matchElementWithDom(elem)
   })
 
@@ -1496,7 +1500,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
           'sub-comp': subComp,
         },
         template: tmpl(`
-        <sub-comp>
+        <sub-comp is="">
           <a slot="{{s}}"></a>
         </sub-comp>
       `),
@@ -1504,17 +1508,17 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       .general()
     const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
-    expect(domHtml(elem)).toBe('<sub-comp><div></div><span></span></sub-comp>')
+    expect(domHtml(elem)).toBe('<sub-comp is=""><div></div><span></span></sub-comp>')
     matchElementWithDom(elem)
     elem.setData({
       s: 'a',
     })
-    expect(domHtml(elem)).toBe('<sub-comp><div><a></a></div><span></span></sub-comp>')
+    expect(domHtml(elem)).toBe('<sub-comp is=""><div><a></a></div><span></span></sub-comp>')
     matchElementWithDom(elem)
     elem.setData({
       s: 'b',
     })
-    expect(domHtml(elem)).toBe('<sub-comp><div></div><span><a></a></span></sub-comp>')
+    expect(domHtml(elem)).toBe('<sub-comp is=""><div></div><span><a></a></span></sub-comp>')
     matchElementWithDom(elem)
   })
 
@@ -1549,44 +1553,44 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
     const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     const subElem = (elem.$.sub as glassEasel.GeneralComponent).asInstanceOf(subComp)!
     glassEasel.Element.pretendAttached(elem)
-    expect(domHtml(elem)).toBe('<sub-comp><a></a><b></b><c><s></s></c></sub-comp>')
+    expect(domHtml(elem)).toBe('<sub-comp is=""><a></a><b></b><c><s></s></c></sub-comp>')
     matchElementWithDom(elem)
     subElem.setData({
       b: 's',
     })
-    expect(domHtml(elem)).toBe('<sub-comp><a></a><b><s></s></b><c></c></sub-comp>')
+    expect(domHtml(elem)).toBe('<sub-comp is=""><a></a><b><s></s></b><c></c></sub-comp>')
     matchElementWithDom(elem)
     subElem.setData({
       a: 's',
     })
-    expect(domHtml(elem)).toBe('<sub-comp><a><s></s></a><b></b><c></c></sub-comp>')
+    expect(domHtml(elem)).toBe('<sub-comp is=""><a><s></s></a><b></b><c></c></sub-comp>')
     matchElementWithDom(elem)
     subElem.setData({
       b: '',
       c: '',
     })
-    expect(domHtml(elem)).toBe('<sub-comp><a><s></s></a><b></b><c></c></sub-comp>')
+    expect(domHtml(elem)).toBe('<sub-comp is=""><a><s></s></a><b></b><c></c></sub-comp>')
     matchElementWithDom(elem)
     subElem.setData({
       c: 's',
     })
-    expect(domHtml(elem)).toBe('<sub-comp><a><s></s></a><b></b><c></c></sub-comp>')
+    expect(domHtml(elem)).toBe('<sub-comp is=""><a><s></s></a><b></b><c></c></sub-comp>')
     matchElementWithDom(elem)
     subElem.setData({
       b: 's',
     })
-    expect(domHtml(elem)).toBe('<sub-comp><a><s></s></a><b></b><c></c></sub-comp>')
+    expect(domHtml(elem)).toBe('<sub-comp is=""><a><s></s></a><b></b><c></c></sub-comp>')
     matchElementWithDom(elem)
     subElem.setData({
       a: 'a',
       b: 'b',
     })
-    expect(domHtml(elem)).toBe('<sub-comp><a></a><b></b><c><s></s></c></sub-comp>')
+    expect(domHtml(elem)).toBe('<sub-comp is=""><a></a><b></b><c><s></s></c></sub-comp>')
     matchElementWithDom(elem)
     subElem.setData({
       c: '',
     })
-    expect(domHtml(elem)).toBe('<sub-comp><a></a><b></b><c></c></sub-comp>')
+    expect(domHtml(elem)).toBe('<sub-comp is=""><a></a><b></b><c></c></sub-comp>')
     matchElementWithDom(elem)
   })
 
@@ -1684,7 +1688,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       .general()
     const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
-    expect(domHtml(elem)).toBe('<sub-comp><div class="abc a-4"></div></sub-comp>')
+    expect(domHtml(elem)).toBe('<sub-comp is=""><div class="abc a-4"></div></sub-comp>')
     matchElementWithDom(elem)
   })
 
@@ -1717,14 +1721,14 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
     const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
     expect(domHtml(elem)).toBe(
-      '<sub-comp class="p--static"><div class="inner p--a-class"></div></sub-comp>',
+      '<sub-comp is="" class="p--static"><div class="inner p--a-class"></div></sub-comp>',
     )
     matchElementWithDom(elem)
     elem.setData({
       classes: ['static', 'dynamic'],
     })
     expect(domHtml(elem)).toBe(
-      '<sub-comp class="p--static p--dynamic"><div class="inner p--a-class"></div></sub-comp>',
+      '<sub-comp is="" class="p--static p--dynamic"><div class="inner p--a-class"></div></sub-comp>',
     )
     matchElementWithDom(elem)
     elem.setData({
@@ -1732,13 +1736,15 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       extClass: ['a-class', 'dynamic'],
     })
     expect(domHtml(elem)).toBe(
-      '<sub-comp class=""><div class="inner p--a-class p--dynamic"></div></sub-comp>',
+      '<sub-comp is="" class=""><div class="inner p--a-class p--dynamic"></div></sub-comp>',
     )
     matchElementWithDom(elem)
     elem.setData({
       extClass: 'static',
     })
-    expect(domHtml(elem)).toBe('<sub-comp class=""><div class="inner p--static"></div></sub-comp>')
+    expect(domHtml(elem)).toBe(
+      '<sub-comp is="" class=""><div class="inner p--static"></div></sub-comp>',
+    )
     matchElementWithDom(elem)
   })
 
@@ -1774,21 +1780,21 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
     const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
     expect(domHtml(elem)).toBe(
-      '<sub-comp class="p--static"><div class="p--static p--a-class"></div></sub-comp>',
+      '<sub-comp is="" class="p--static"><div class="p--static p--a-class"></div></sub-comp>',
     )
     matchElementWithDom(elem)
     elem.setData({
       dynamic: 'dynamic',
     })
     expect(domHtml(elem)).toBe(
-      '<sub-comp class="p--static p--dynamic"><div class="p--static p--a-class p--dynamic"></div></sub-comp>',
+      '<sub-comp is="" class="p--static p--dynamic"><div class="p--static p--a-class p--dynamic"></div></sub-comp>',
     )
     matchElementWithDom(elem)
     elem.setData({
       dynamic: '',
     })
     expect(domHtml(elem)).toBe(
-      '<sub-comp class="p--static"><div class="p--static p--a-class"></div></sub-comp>',
+      '<sub-comp is="" class="p--static"><div class="p--static p--a-class"></div></sub-comp>',
     )
     matchElementWithDom(elem)
   })
@@ -1835,19 +1841,19 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
         dynamic1: '',
         dynamic2: '',
       },
-      template: tmpl(`<def dynamic="{{dynamic1}}" a-class="root {{dynamic2}}" />`),
+      template: tmpl(`<def is="" dynamic="{{dynamic1}}" a-class="root {{dynamic2}}" />`),
     })
     const elem = glassEasel.Component.createWithContext('root', parent, testBackend)
     glassEasel.Element.pretendAttached(elem)
     expect(domHtml(elem)).toBe(
-      '<def><sub class="p--static"><div class="p--static root pp--root"></div></sub></def>',
+      '<def is=""><sub is="" class="p--static"><div class="p--static root pp--root"></div></sub></def>',
     )
     matchElementWithDom(elem)
     elem.setData({
       dynamic1: 'dynamic',
     })
     expect(domHtml(elem)).toBe(
-      '<def><sub class="p--static p--dynamic"><div class="p--static root pp--root p--dynamic"></div></sub></def>',
+      '<def is=""><sub is="" class="p--static p--dynamic"><div class="p--static root pp--root p--dynamic"></div></sub></def>',
     )
     matchElementWithDom(elem)
     elem.setData({
@@ -1855,7 +1861,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       dynamic2: 'dynamic',
     })
     expect(domHtml(elem)).toBe(
-      '<def><sub class="p--static"><div class="p--static root pp--root dynamic pp--dynamic"></div></sub></def>',
+      '<def is=""><sub is="" class="p--static"><div class="p--static root pp--root dynamic pp--dynamic"></div></sub></def>',
     )
     matchElementWithDom(elem)
   })
@@ -1894,7 +1900,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       .general()
     const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
-    expect(domHtml(elem)).toBe('<sub-comp><div class="a1"></div></sub-comp>')
+    expect(domHtml(elem)).toBe('<sub-comp is=""><div class="a1"></div></sub-comp>')
     matchElementWithDom(elem)
     expect(ops).toBe(1)
     elem.setData({
@@ -1908,7 +1914,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
     elem.setData({
       obj: { a: 'a2' },
     })
-    expect(domHtml(elem)).toBe('<sub-comp><div class="a2"></div></sub-comp>')
+    expect(domHtml(elem)).toBe('<sub-comp is=""><div class="a2"></div></sub-comp>')
     matchElementWithDom(elem)
     expect(ops).toBe(3)
   })