glass-easel 0.2.0 → 0.3.0

package/tests/core/slot.test.ts

@@ -1,22 +1,22 @@
-import { tmpl, domBackend } from '../base/env'
+import { tmpl, domBackend, composedBackend, shadowBackend } from '../base/env'
 import { virtual as matchElementWithDom } from '../base/match'
 import * as glassEasel from '../../src'
 
-const componentSpace = new glassEasel.ComponentSpace()
-componentSpace.updateComponentOptions({
-  writeFieldsToNode: true,
-  writeIdToDOM: true,
-})
-componentSpace.defineComponent({
-  is: '',
-})
-
 const domHtml = (elem: glassEasel.Element): string => {
   const domElem = elem.getBackendElement() as unknown as Element
   return domElem.innerHTML
 }
 
-describe('slot', () => {
+const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
+  const componentSpace = new glassEasel.ComponentSpace()
+  componentSpace.updateComponentOptions({
+    writeFieldsToNode: true,
+    writeIdToDOM: true,
+  })
+  componentSpace.defineComponent({
+    is: '',
+  })
+
   describe('dynamic slot', () => {
     describe('core', () => {
       test('should support duplicate slot', () => {
@@ -62,7 +62,7 @@ describe('slot', () => {
         const parentElem = glassEasel.Component.createWithContext(
           'root',
           parent.general(),
-          domBackend,
+          testBackend,
         )
         const childElem = parentElem.getShadowRoot()!.childNodes[0]!.asInstanceOf(child)!
         const a = childElem.$.a as glassEasel.Element
@@ -192,7 +192,7 @@ describe('slot', () => {
         const parentElem = glassEasel.Component.createWithContext(
           'root',
           parent.general(),
-          domBackend,
+          testBackend,
         )
         const childElem = parentElem.getShadowRoot()!.childNodes[0]!.asInstanceOf(child)!
 
@@ -378,7 +378,7 @@ describe('slot', () => {
         const parentElem = glassEasel.Component.createWithContext(
           'root',
           parent.general(),
-          domBackend,
+          testBackend,
         )
         const childElem = parentElem.getShadowRoot()!.childNodes[0]!.asInstanceOf(child)!
 
@@ -447,7 +447,7 @@ describe('slot', () => {
         const parentElem = glassEasel.Component.createWithContext(
           'root',
           parent.general(),
-          domBackend,
+          testBackend,
         )
         const childElem = parentElem.getShadowRoot()!.childNodes[0]!.asInstanceOf(child)!
 
@@ -583,7 +583,7 @@ describe('slot', () => {
         const parentElem = glassEasel.Component.createWithContext(
           'root',
           parent.general(),
-          domBackend,
+          testBackend,
         ).asInstanceOf(parent)!
 
         glassEasel.Element.pretendAttached(parentElem)
@@ -843,7 +843,7 @@ describe('slot', () => {
         const parentElem = glassEasel.Component.createWithContext(
           'root',
           parent.general(),
-          domBackend,
+          testBackend,
         ).asInstanceOf(parent)!
 
         glassEasel.Element.pretendAttached(parentElem)
@@ -1018,7 +1018,7 @@ describe('slot', () => {
         const parentElem = glassEasel.Component.createWithContext(
           'root',
           parent.general(),
-          domBackend,
+          testBackend,
         ).asInstanceOf(parent)!
         const childElem = parentElem.getShadowRoot()!.childNodes[0]!.asInstanceOf(child)!
 
@@ -1113,7 +1113,7 @@ describe('slot', () => {
           })
           .registerComponent()
 
-        const parentElem = glassEasel.Component.createWithContext('root', parent, domBackend)
+        const parentElem = glassEasel.Component.createWithContext('root', parent, testBackend)
         glassEasel.Element.pretendAttached(parentElem)
         const childElem = parentElem.getShadowRoot()!.childNodes[1]!.asInstanceOf(child)!
 
@@ -1308,7 +1308,7 @@ describe('slot', () => {
         const parentElem = glassEasel.Component.createWithContext(
           'root',
           parent.general(),
-          domBackend,
+          testBackend,
         )
         const noneElem = parentElem.getShadowRoot()!.childNodes[0]!.asInstanceOf(none)!
         const recElem = parentElem.getShadowRoot()!.childNodes[1]!.asInstanceOf(rec)!
@@ -1368,7 +1368,7 @@ describe('slot', () => {
         const parentElem = glassEasel.Component.createWithContext(
           'root',
           parent.general(),
-          domBackend,
+          testBackend,
         )
 
         expect(domHtml(parentElem)).toBe('<impl><div><div>123</div></div></impl>')
@@ -1394,6 +1394,140 @@ describe('slot', () => {
         expect(domHtml(parentElem)).toBe('<impl><span><div>456</div></span></impl>')
         matchElementWithDom(parentElem)
       })
+
+      test('should support slot as slot content', () => {
+        const comp = componentSpace
+          .define()
+          .options({
+            multipleSlots: true,
+          })
+          .template(
+            tmpl(`
+              <div>comp</div>
+              <slot name="comp-slot"></slot>
+            `),
+          )
+          .registerComponent()
+
+        const child = componentSpace
+          .define()
+          .options({
+            multipleSlots: true,
+          })
+          .usingComponents({ comp })
+          .template(
+            tmpl(`
+              <comp>
+                <div>child</div>
+                <slot name="child-slot" slot="{{s}}" />
+              </comp>
+            `),
+          )
+          .property('s', String)
+          .registerComponent()
+
+        const parent = componentSpace
+          .define()
+          .usingComponents({ child })
+          .template(
+            tmpl(`
+              <child s="{{s}}">
+                <div slot="child-slot">content</div>
+              </child>
+            `),
+          )
+          .data(() => ({
+            s: '',
+          }))
+          .registerComponent()
+
+        const parentElem = glassEasel.Component.createWithContext(
+          'root',
+          parent.general(),
+          testBackend,
+        )
+        expect(domHtml(parentElem)).toBe('<child><comp><div>comp</div></comp></child>')
+
+        parentElem.setData({
+          s: 'comp-slot',
+        })
+        expect(domHtml(parentElem)).toBe(
+          '<child><comp><div>comp</div><div>content</div></comp></child>',
+        )
+
+        parentElem.setData({
+          s: 'invalid',
+        })
+        expect(domHtml(parentElem)).toBe('<child><comp><div>comp</div></comp></child>')
+      })
+
+      test('should support slot as slot content with virtual host and placeholder', () => {
+        const placeholder = componentSpace
+          .define()
+          .options({
+            multipleSlots: true,
+            virtualHost: true,
+          })
+          .template(
+            tmpl(`
+              <div>placeholder</div>
+              <slot name="content"></slot>
+            `),
+          )
+          .registerComponent()
+
+        const child = componentSpace
+          .define()
+          .options({
+            multipleSlots: true,
+            virtualHost: true,
+          })
+          .usingComponents({ comp: 'comp', placeholder })
+          .placeholders({ comp: 'placeholder' })
+          .template(
+            tmpl(`
+              <comp>
+                <div>child</div>
+                <slot name="content" slot="content" />
+              </comp>
+            `),
+          )
+          .registerComponent()
+
+        const parent = componentSpace
+          .define()
+          .usingComponents({ child })
+          .template(
+            tmpl(`
+              <child>
+                <div slot="content">content</div>
+              </child>
+            `),
+          )
+          .registerComponent()
+
+        const parentElem = glassEasel.Component.createWithContext(
+          'root',
+          parent.general(),
+          testBackend,
+        )
+        expect(domHtml(parentElem)).toBe('<div>placeholder</div><div>content</div>')
+
+        componentSpace
+          .define('comp')
+          .options({
+            multipleSlots: true,
+          })
+          .template(
+            tmpl(`
+              <div>comp</div>
+              <slot name="content"></slot>
+            `),
+          )
+          .registerComponent()
+
+        expect(domHtml(parentElem)).toBe('<comp><div>comp</div><div>content</div></comp>')
+      })
     })
   })
 
@@ -1434,7 +1568,7 @@ describe('slot', () => {
         })
         .registerComponent()
 
-      const parentElem = glassEasel.Component.createWithContext('root', parent, domBackend)
+      const parentElem = glassEasel.Component.createWithContext('root', parent, testBackend)
       const singleElem = (parentElem.$.s as glassEasel.Element).asInstanceOf(single)!
       const multiElem = (parentElem.$.m as glassEasel.Element).asInstanceOf(multi)!
       const dynamicElem = (parentElem.$.d as glassEasel.Element).asInstanceOf(dynamic)!
@@ -1555,4 +1689,8 @@ describe('slot', () => {
       )
     })
   })
-})
+}
+
+describe('slot (DOM backend)', () => testCases(domBackend))
+describe('slot (shadow backend)', () => testCases(shadowBackend))
+describe('slot (composed backend)', () => testCases(composedBackend))

package/tests/legacy/component.test.js

@@ -1,34 +1,39 @@
 /* eslint-disable */
 
-const { tmpl, domBackend, shadowBackend, execWithWarn } = require('../base/env')
+const { tmpl, domBackend, shadowBackend, execWithWarn, composedBackend, getCustomExternalTemplateEngine } = require('../base/env')
 const glassEasel = require('../../src')
 
-const componentSpace = new glassEasel.ComponentSpace()
-componentSpace.updateComponentOptions({
-  writeFieldsToNode: true,
-})
-componentSpace.defineComponent({
-  is: '',
-})
 
-const regBeh = (config) => {
-  return componentSpace.defineBehavior(config)
-}
+const testCases = function (testBackend) {
+  const componentSpace = new glassEasel.ComponentSpace(
+    undefined,
+    undefined,
+    glassEasel.getDefaultComponentSpace().styleScopeManager,
+  )
+  componentSpace.updateComponentOptions({
+    writeFieldsToNode: true,
+  })
+  componentSpace.defineComponent({
+    is: '',
+  })
 
-const regElem = (config) => {
-  const { template, ...c } = config
-  if (template) c.template = tmpl(template)
-  const ret = componentSpace.defineComponent(c)
-  componentSpace.setGlobalUsingComponent(config.is, ret)
-  return ret
-}
+  const regBeh = (config) => {
+    return componentSpace.defineBehavior(config)
+  }
 
-const createElem = (is, backend) => {
-  const def = componentSpace.getComponent(is)
-  return glassEasel.Component.createWithContext(is || 'test', def, backend || domBackend)
-}
+  const regElem = (config) => {
+    const { template, ...c } = config
+    if (template) c.template = tmpl(template)
+    const ret = componentSpace.defineComponent(c)
+    componentSpace.setGlobalUsingComponent(config.is, ret)
+    return ret
+  }
+
+  const createElem = (is, backend) => {
+    const def = componentSpace.getComponent(is)
+    return glassEasel.Component.createWithContext(is || 'test', def, backend || testBackend)
+  }
 
-describe('Component', function () {
   describe('#register', function () {
     it('should be able to register component', function () {
       regElem({
@@ -562,7 +567,9 @@ describe('Component', function () {
       var elem = createElem('')
       expect(elem).toBeInstanceOf(glassEasel.Element)
       expect(elem.is).toBe('')
-      expect(elem.$$).toBeInstanceOf(window.HTMLElement)
+      if (testBackend === domBackend) {
+        expect(elem.$$).toBeInstanceOf(window.HTMLElement)
+      }
     })
 
     it('should call lifetime methods', function () {
@@ -699,11 +706,11 @@ describe('Component', function () {
       var elem = createElem('component-attr-a')
       expect(elem.data.da).toBe(1)
       expect(elem.$.a.$$.getAttribute('attr-a')).toBe('1')
-      expect(elem.$.a.getAttribute('attr-a')).toBe('1')
+      expect(elem.$.a.getAttribute('attr-a')).toBe(1)
       elem.data = { da: 2 }
       expect(elem.data.da).toBe(2)
       expect(elem.$.a.$$.getAttribute('attr-a')).toBe('2')
-      expect(elem.$.a.getAttribute('attr-a')).toBe('2')
+      expect(elem.$.a.getAttribute('attr-a')).toBe(2)
     })
 
     it('should reflect to attributes', function () {
@@ -851,7 +858,10 @@ describe('Component', function () {
       template: '<div></div>',
       lifetimes: {
         created: function (e) {
-          throw new Error('test')
+          throw new Error('created')
+        },
+        attached: function (e) {
+          throw new Error('attached')
         },
         error: function (e) {
           errorCalled++
@@ -859,12 +869,15 @@ describe('Component', function () {
         },
       },
     })
-    createElem('component-error-lifetimes-a')
+    const elem = createElem('component-error-lifetimes-a')
 
-    glassEasel.globalOptions.throwGlobalError = true
-    console.error = oldConsoleError
     expect(errorCalled).toBe(1)
-    expect(errorObj.message).toBe('test')
+    expect(errorObj.message).toBe('created')
+    glassEasel.Element.pretendAttached(elem)
+    expect(errorCalled).toBe(2)
+    expect(errorObj.message).toBe('attached')
+    console.error = oldConsoleError
+    glassEasel.globalOptions.throwGlobalError = true
   })
 
   describe('#ownerShadowRoot', function () {
@@ -922,53 +935,82 @@ describe('Component', function () {
           extraStyleScope: glassEasel.StyleScopeManager.globalScope(),
         },
         behaviors: ['component-class-beh'],
-        template: '<span id="b"></span>',
+        template: '<span id="b" class="bb"></span>',
+      })
+      regElem({
+        is: 'component-class-c',
+        options: {
+          styleScope: componentSpace.styleScopeManager.register('component-class-c'),
+          extraStyleScope: componentSpace.styleScopeManager.register('component-class-cc'),
+        },
+        behaviors: ['component-class-beh'],
+        template: '<span id="c" class="cc"></span>',
       })
     })
 
     it('should allow setting classes', function () {
       var elem = createElem('component-class-a')
-      var elem2 = createElem('component-class-b')
       expect(elem.$.a.classList.contains('aa')).toBe(true)
-      expect(elem2.$.b.classList.contains('aa')).toBe(false)
       expect(elem.$.a.classList.contains('component-class-a--aa')).toBe(false)
-      expect(elem2.$.b.classList.contains('component-class-b--aa')).toBe(false)
       expect(elem.$.a.class).toBe('aa')
       expect(elem.$.a.$$.getAttribute('class')).toBe('component-class-a--aa')
-      expect(elem2.$.b.class).toBe('')
-      expect(elem2.$.b.$$.getAttribute('class')).toBe(null)
       elem.$.a.classList.toggle('aa')
       elem.$.a.classList.toggle('a-a')
+      expect(elem.$.a.class).toBe('a-a')
       expect(elem.$.a.classList.contains('aa')).toBe(false)
       expect(elem.$.a.classList.contains('a-a')).toBe(true)
       expect(elem.$.a.$$.getAttribute('class')).toBe('component-class-a--a-a')
       elem.$.a.classList.toggle('aa', false)
       elem.$.a.classList.toggle('a-a', true)
+      expect(elem.$.a.class).toBe('a-a')
       expect(elem.$.a.classList.contains('aa')).toBe(false)
       expect(elem.$.a.classList.contains('a-a')).toBe(true)
       expect(elem.$.a.$$.getAttribute('class')).toBe('component-class-a--a-a')
-    })
-
-    it('should allow setting classes in non-DOM backend', function () {
-      var elem = createElem('component-class-a', shadowBackend)
-      var elem2 = createElem('component-class-b', shadowBackend)
-      expect(elem.$.a.classList.contains('aa')).toBe(true)
-      expect(elem2.$.b.classList.contains('aa')).toBe(false)
-      expect(elem.$.a.classList.contains('component-class-a--aa')).toBe(false)
-      expect(elem2.$.b.classList.contains('component-class-b--aa')).toBe(false)
-      expect(elem.$.a.class).toBe('aa')
-      expect(elem2.$.b.class).toBe('')
-      elem.$.a.class = 'aa'
+      elem.$.a.classList.setClassNames(['aa', 'a-a'])
+      expect(elem.$.a.class).toBe('aa a-a')
       expect(elem.$.a.classList.contains('aa')).toBe(true)
-      expect(elem.$.a.classList.contains('a-a')).toBe(false)
-      elem.$.a.classList.toggle('aa', false)
-      elem.$.a.classList.toggle('a-a', true)
-      expect(elem.$.a.classList.contains('aa')).toBe(false)
       expect(elem.$.a.classList.contains('a-a')).toBe(true)
-      elem.$.a.destroyBackendElement()
-      elem.$.a.class = 'aa'
-      expect(elem.$.a.classList.contains('aa')).toBe(true)
-      expect(elem.$.a.classList.contains('a-a')).toBe(false)
+      expect(elem.$.a.$$.getAttribute('class')).toBe('component-class-a--a-a component-class-a--aa')
+    })
+
+    it('should allow setting classes with extra global style scope', function () {
+      var elem = createElem('component-class-b')
+      expect(elem.$.b.classList.contains('bb')).toBe(true)
+      expect(elem.$.b.classList.contains('component-class-b--bb')).toBe(false)
+      expect(elem.$.b.class).toBe('bb')
+      expect(elem.$.b.$$.getAttribute('class')).toBe('bb component-class-b--bb')
+      elem.$.b.classList.toggle('bb')
+      elem.$.b.classList.toggle('b-b')
+      expect(elem.$.b.class).toBe('b-b')
+      expect(elem.$.b.classList.contains('bb')).toBe(false)
+      expect(elem.$.b.classList.contains('b-b')).toBe(true)
+      expect(elem.$.b.$$.getAttribute('class')).toBe('b-b component-class-b--b-b')
+      elem.$.b.classList.toggle('bb', false)
+      elem.$.b.classList.toggle('b-b', true)
+      expect(elem.$.b.class).toBe('b-b')
+      expect(elem.$.b.classList.contains('bb')).toBe(false)
+      expect(elem.$.b.classList.contains('b-b')).toBe(true)
+      expect(elem.$.b.$$.getAttribute('class')).toBe('b-b component-class-b--b-b')
+    })
+
+    it('should allow setting classes with extra style scope', function () {
+      var elem = createElem('component-class-c')
+      expect(elem.$.c.classList.contains('cc')).toBe(true)
+      expect(elem.$.c.classList.contains('component-class-c--cc')).toBe(false)
+      expect(elem.$.c.class).toBe('cc')
+      expect(elem.$.c.$$.getAttribute('class')).toBe('component-class-cc--cc component-class-c--cc')
+      elem.$.c.classList.toggle('cc')
+      elem.$.c.classList.toggle('c-c')
+      expect(elem.$.c.class).toBe('c-c')
+      expect(elem.$.c.classList.contains('cc')).toBe(false)
+      expect(elem.$.c.classList.contains('c-c')).toBe(true)
+      expect(elem.$.c.$$.getAttribute('class')).toBe('component-class-cc--c-c component-class-c--c-c')
+      elem.$.c.classList.toggle('cc', false)
+      elem.$.c.classList.toggle('c-c', true)
+      expect(elem.$.c.class).toBe('c-c')
+      expect(elem.$.c.classList.contains('cc')).toBe(false)
+      expect(elem.$.c.classList.contains('c-c')).toBe(true)
+      expect(elem.$.c.$$.getAttribute('class')).toBe('component-class-cc--c-c component-class-c--c-c')
     })
 
     it('should be able to disable class prefix', function () {
@@ -1017,7 +1059,7 @@ describe('Component', function () {
         options: {
           styleScope: componentSpace.styleScopeManager.register('a'),
         },
-        template: '<span id="a" class="a ^a ^^aa ~a"></span>',
+        template: '<span id="a" class="a ^a1 ^^a2 ^^^a3 ^^^^a4 ~a5"></span>',
       })
       regElem({
         is: 'component-class-special-prefix-b',
@@ -1025,25 +1067,25 @@ describe('Component', function () {
           styleScope: componentSpace.styleScopeManager.register('b'),
           extraStyleScope: glassEasel.StyleScopeManager.globalScope(),
         },
-        template: '<component-class-special-prefix-a id="b" class="b ^b ^^b ^^^bbb ~bb" />',
+        template: '<component-class-special-prefix-a id="b" class="b ^b1 ^^b2 ^^^b3 ~b4" />',
       })
       regElem({
         is: 'component-class-special-prefix-c',
         options: {
           styleScope: componentSpace.styleScopeManager.register('c'),
         },
-        template: '<component-class-special-prefix-b id="c" class="c ^c ~c" />',
+        template: '<component-class-special-prefix-b id="c" class="c ^c1 ^^c2 ~c3" />',
       })
       var elem = createElem('component-class-special-prefix-c')
-      expect(elem.$.c.class).toBe('c ^c ~c')
-      expect(elem.$.c.$$.getAttribute('class')).toBe('c--c c')
-      expect(elem.$.c.shadowRoot.querySelector('.bb').$$.getAttribute('class')).toBe(
-        'b b--b c--b c--bbb c--bb',
+      expect(elem.$.c.class).toBe('c ^c1 ^^c2 ~c3')
+      expect(elem.$.c.$$.getAttribute('class')).toBe('c--c c--c1 c--c2 c--c3')
+      expect(elem.$.c.shadowRoot.querySelector('.b2').$$.getAttribute('class')).toBe(
+        'b b--b c--b1 c--b2 c--b3 c--b4',
       )
-      expect(elem.$.c.$.b.shadowRoot.querySelector('.aa').$$.getAttribute('class')).toBe(
-        'a--a b--a c--aa c--a',
+      expect(elem.$.c.$.b.shadowRoot.querySelector('.a2').$$.getAttribute('class')).toBe(
+        'a--a b--a1 c--a2 c--a3 c--a4 c--a5',
       )
-      expect(elem.$.c.$.b.$.a.$$.getAttribute('class')).toBe('a--a b--a c--aa c--a')
+      expect(elem.$.c.$.b.$.a.$$.getAttribute('class')).toBe('a--a b--a1 c--a2 c--a3 c--a4 c--a5')
     })
 
     it('should adding write ID and class prefix info to DOM when required', function () {
@@ -1098,6 +1140,28 @@ describe('Component', function () {
           styleScope: componentSpace.styleScopeManager.register(
             'component-external-classes-native',
           ),
+          templateEngine:
+            testBackend === domBackend
+              ? undefined
+              : getCustomExternalTemplateEngine((comp) => {
+                  var root = comp.getBackendElement()
+                  var slot
+                  if (testBackend === shadowBackend) {
+                    var shadowRoot = root.getShadowRoot()
+                    slot = shadowRoot.createElement('div', 'div')
+                    slot.setSlotName('')
+                    shadowRoot.appendChild(slot)
+                  } else {
+                    slot = root
+                  }
+                  return {
+                    root,
+                    slot,
+                    getIdMap: () => ({}),
+                    handleEvent() {},
+                    setListener() {},
+                  }
+                }),
         },
       })
       regElem({
@@ -1139,11 +1203,11 @@ describe('Component', function () {
       expect(elem.$.c1.$.b1.$.a1.$.child.$$.getAttribute('class')).toBe(
         'component-external-classes-a--static',
       )
-      expect(elem.$.c1.$.b1.$.a1.$$.getAttribute('class')).toBe('')
+      expect(elem.$.c1.$.b1.$.a1.$$.getAttribute('class')).toBe(null)
       expect(elem.$.c1.$.b1.$.a2.$$.getAttribute('class')).toBe(
         'component-external-classes-b--static',
       )
-      expect(elem.$.c1.$.b1.$$.getAttribute('class')).toBe('')
+      expect(elem.$.c1.$.b1.$$.getAttribute('class')).toBe(null)
       expect(elem.$.c1.$$.getAttribute('class')).toBe(null)
       elem.$.c1.$.b1.$.a1.setExternalClass('A1', 'B1')
       expect(elem.$.c1.$.b1.$.a1.$.child.$$.getAttribute('class')).toBe(
@@ -1153,7 +1217,7 @@ describe('Component', function () {
       expect(elem.$.c1.$.b1.$.a1.$.child.$$.getAttribute('class')).toBe(
         'component-external-classes-a--static',
       )
-      expect(elem.$.c1.$.b1.$.a1.$$.getAttribute('class')).toBe('')
+      expect(elem.$.c1.$.b1.$.a1.$$.getAttribute('class')).toBe(null)
       expect(elem.$.c1.$.b1.$.a2.$$.getAttribute('class')).toBe(
         'component-external-classes-b--static',
       )
@@ -1175,10 +1239,10 @@ describe('Component', function () {
       )
       expect(elem.$.c1.$.b1.$.a1.$$.getAttribute('class')).toBe('component-external-classes-d--AAA')
       expect(elem.$.c1.$.b1.$.a2.$.child.$$.getAttribute('class')).toBe(
-        'component-external-classes-a--static component-external-classes-d--AAA component-external-classes-b--BBB',
+        'component-external-classes-a--static component-external-classes-b--BBB component-external-classes-d--AAA',
       )
       expect(elem.$.c1.$.b1.$.a2.$$.getAttribute('class')).toBe(
-        'component-external-classes-d--AAA component-external-classes-b--static',
+        'component-external-classes-b--static component-external-classes-d--AAA',
       )
       expect(elem.$.c1.$.b1.$$.getAttribute('class')).toBe('component-external-classes-d--AAA')
 
@@ -1188,10 +1252,10 @@ describe('Component', function () {
       )
       expect(elem.$.c1.$.b1.$.a1.$$.getAttribute('class')).toBe('component-external-classes-d--BBB')
       expect(elem.$.c1.$.b1.$.a2.$.child.$$.getAttribute('class')).toBe(
-        'component-external-classes-a--static component-external-classes-d--BBB component-external-classes-b--BBB',
+        'component-external-classes-a--static component-external-classes-b--BBB component-external-classes-d--BBB',
       )
       expect(elem.$.c1.$.b1.$.a2.$$.getAttribute('class')).toBe(
-        'component-external-classes-d--BBB component-external-classes-b--static',
+        'component-external-classes-b--static component-external-classes-d--BBB',
       )
       expect(elem.$.c1.$.b1.$$.getAttribute('class')).toBe('component-external-classes-d--BBB')
 
@@ -1210,10 +1274,10 @@ describe('Component', function () {
       )
       expect(elem.$.c1.$.b1.$.a1.$$.getAttribute('class')).toBe('component-external-classes-d--BBB')
       expect(elem.$.c1.$.b1.$.a2.$.child.$$.getAttribute('class')).toBe(
-        'component-external-classes-a--static component-external-classes-d--CCC component-external-classes-c--CCCC component-external-classes-b--BBB',
+        'component-external-classes-a--static component-external-classes-b--BBB component-external-classes-d--CCC component-external-classes-c--CCCC',
       )
       expect(elem.$.c1.$.b1.$.a2.$$.getAttribute('class')).toBe(
-        'component-external-classes-d--CCC component-external-classes-c--CCCC component-external-classes-b--static',
+        'component-external-classes-b--static component-external-classes-d--CCC component-external-classes-c--CCCC',
       )
       expect(elem.$.c1.$.b1.$.a3.$$.getAttribute('class')).toBe(
         'component-external-classes-d--BBB component-external-classes-d--CCC component-external-classes-c--CCCC',
@@ -1235,10 +1299,10 @@ describe('Component', function () {
       )
       expect(elem.$.c1.$.b1.$.a1.$$.getAttribute('class')).toBe('')
       expect(elem.$.c1.$.b1.$.a2.$.child.$$.getAttribute('class')).toBe(
-        'component-external-classes-a--static component-external-classes-d--CCC component-external-classes-b--BBB',
+        'component-external-classes-a--static component-external-classes-b--BBB component-external-classes-d--CCC',
       )
       expect(elem.$.c1.$.b1.$.a2.$$.getAttribute('class')).toBe(
-        'component-external-classes-d--CCC component-external-classes-b--static',
+        'component-external-classes-b--static component-external-classes-d--CCC',
       )
       expect(elem.$.c1.$.b1.$.a3.$$.getAttribute('class')).toBe('component-external-classes-d--CCC')
       expect(elem.$.c1.$.b1.$$.getAttribute('class')).toBe('component-external-classes-d--BBB')
@@ -1448,4 +1512,14 @@ describe('Component', function () {
       ['pd', { customProp: 'customValue' }],
     ])
   })
+}
+
+describe('Component (DOM backend)', function () {
+  testCases(domBackend)
+})
+describe('Component (shadow backend)', function () {
+  testCases(shadowBackend)
+})
+describe('Component (composed backend)', function () {
+  testCases(composedBackend)
 })