增加默认render; 优化渲染机制,避免在vue下被渲染2次

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bd/core",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "type": "module",
   "description": "百搭UI组件库的核心",
   "main": "dist/index.js",

src/constants.js

@@ -51,6 +51,7 @@ export const __attr2prop__ = Symbol('attr2prop')
 export const __clear_update__ = Symbol('clearupdate')
 export const __children__ = Symbol('children')
 export const __updated__ = Symbol('updated')
+export const __in_tree__ = Symbol('intree')
 
 export const RESET_CSS_STYLE = `* {box-sizing: border-box;margin: 0;padding: 0;}::before,::after {box-sizing: border-box;}`
 

src/index.js

@@ -19,7 +19,8 @@ import {
   __attr2prop__,
   __clear_update__,
   __children__,
-  __updated__
+  __updated__,
+  __in_tree__
 } from './constants.js'
 import { css, adoptStyles } from './css.js'
 import { render, html, svg } from './html.js'
@@ -102,6 +103,7 @@ export class Component extends HTMLElement {
     super()
     this[__pending__] = false
     this[__mounted__] = false
+    this[__in_tree__] = false
     // 这里提前定义一次, 是为了在connectedCallback之前, 就已有赋值时报错的bug
     this[__changed_props__] = new Map() // 记录一次渲染周期内变化的属性
     this.root = this.shadowRoot || this.attachShadow({ mode: 'open' })
@@ -215,22 +217,24 @@ export class Component extends HTMLElement {
 
   // 确认更新到视图
   [__updated__]() {
+    if (this[__in_tree__] === false) {
+      this[__in_tree__] = document.body.contains(this)
+    }
+
+    if (this[__in_tree__]) {
       if (this[__pending__]) {
-      try {
         let props = this[__changed_props__]
         this[__render__]()
         this[__feedback__](props)
-      } catch (err) {
-        console.error(err)
-      }
         this[__clear_update__]()
       }
     }
+  }
 
   // 更新回调反馈
   [__feedback__](props) {
     // 初始化时不触发updated回调
-    if (!this[__mounted__]) {
+    if (this[__mounted__] === false) {
       this[__mounted__] = true
       this.mounted()
     } else {
@@ -257,6 +261,9 @@ export class Component extends HTMLElement {
   mounted() {}
   unmounted() {}
   updated() {}
+  render() {
+    return html`<slot></slot>`
+  }
 
   $on(type, callback, options) {
     return bind(this, type, callback, options)