Web Components 中属性在Vue和React中的不同表现

attribute 和 property

总结：DOM property、DOM attribute区别导致自定义标签在 Vue、React 中使用时表现不一，核心思路是做好映射关系。

React中使用 WCs 标签：

const App = () => Cell

export default App;

不会走到WCs的 set，因为传递的是 property。且以上传递的是一个字符串。

class MyCell extends HTMLElement {
  ...
  get desc() {
    return this.getAttribute('desc');
  }
+ set desc(value) {
+    // 不会走到这里
+   this.setAttribute('desc', value);
+ }
  ...
}

Vue中使用 WCs 标签：

会走到 set，Vue 中 desc 表示传递的是 attribute。

class MyCell extends HTMLElement {
  ...
  get desc() {
    return this.getAttribute('desc');
  }
+ set desc(value) {
+    // 与React不同，Vue项目中使用会走到这里
+   this.setAttribute('desc', value);
+ }
  ...
}

如何解决？

为了兼容 WCs 在 React 和 Vue 项目中使用一致性，需要在 WCs 内部去绑定this属性

connectedCallback() {
+  this.desc = this.desc; // attribute -> property 映射
}

布尔值属性传递

自定义一个标签

Vue

Cell

上面属性传的是类型是 string 字符串

如果这样传：
Cell

上面属性传递的类型是 boolean 布尔值

React