From f53cb98bc46ace74a34ed40c1e44430387d137a0 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Tue, 15 Aug 2023 11:44:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=B1=9E=E6=80=A7=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.js | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/index.js b/src/index.js
index fa1562e..c44cc70 100644
--- a/src/index.js
+++ b/src/index.js
@@ -142,7 +142,9 @@ export class Component extends HTMLElement {
 
     for (let [prop, options] of this.constructor[__props__]) {
       this.createProperty(prop, options)
-      this.$requestUpdate(prop)
+      // 按W3C规范, 在构造函数内不可设置节点的属性
+      // 所以这里只记录需要初始化的属性, 在#init()回调中才去修改
+      this[__changed_props__].set(prop, this[prop])
     }
 
     this.created()
@@ -159,7 +161,11 @@ export class Component extends HTMLElement {
           return proxyValue
         },
         set(value) {
-          proxyValue = this.#createProxy(name, options, value)
+          proxyValue = this.#createProxy(
+            name,
+            options,
+            fixedValue(value, options)
+          )
           this.$requestUpdate(name)
         },
         enumerable: false
@@ -208,8 +214,11 @@ export class Component extends HTMLElement {
   }
 
   #init() {
-    // 这里重新赋值一次, 用于清除掉因为 observer 修正产生的变化
-    this[__changed_props__] = new Map()
+    for (let [prop, value] of this[__changed_props__]) {
+      this.#prop2attr(prop, value)
+    }
+    // 这里要清除初始化产生的记录
+    this[__changed_props__].clear()
     this.$requestUpdate()
   }
 
@@ -354,7 +363,7 @@ export class Component extends HTMLElement {
   }
 
   #clearUpdate() {
-    this[__changed_props__] = new Map()
+    this[__changed_props__].clear()
     this[__pending__] = false
   }