update

src/elem.js

@@ -9,6 +9,16 @@ import { $, uuid, h, preload, hyphen } from './utils.js'
 import { Base } from './base-elem.js'
 import { Orphan } from './orphan.js'
 
+class Defs extends Base {
+  constructor(el) {
+    super(el)
+  }
+}
+
+function createDefs(el) {
+  return new Defs(el, this)
+}
+
 export class Component extends Base {
   // #node
   // type
@@ -41,6 +51,9 @@ export class Component extends Base {
   #create(name, attr, child) {
     let node = h(name, attr, child)
     this.node.appendChild(node)
+    if (ORPHAN_TAGS[name]) {
+      return new Orphan(node)
+    }
     return new Component(node)
   }
 

src/orphan.js

@@ -10,23 +10,39 @@ import { uuid, h, preload } from './utils.js'
 export class Orphan extends Base {
   id = null
 
+  #animate
+  #animateMotion
+  #animateTransform
+
   constructor(el) {
     super(el)
     this.id = uuid(this.type)
   }
 
-  animate() {
-    //
-    return this
+  #create(name, attr) {
+    let node = h(name, attr)
+    this.node.appendChild(node)
+    return new base(node)
   }
 
-  animateMotion() {
-    //
-    return this
+  animate(props = null) {
+    if (!this.#animate) {
+      this.#animate = this.#create('animate', props)
+    }
+    return this.#animate
   }
 
-  animateTransform() {
-    //
-    return this
+  animateMotion(props = null) {
+    if (!this.#animateMotion) {
+      this.#animateMotion = this.#create('animateMotion', props)
+    }
+    return this.#animateMotion
+  }
+
+  animateTransform(props = null) {
+    if (!this.#animateTransform) {
+      this.#animateTransform = this.#create('animateTransform', props)
+    }
+    return this.#animateTransform
   }
 }