Web Component

专门用来渲染 web component 的组件，可以通过这种方式来扩展 amis 组件，比如使用 Angular。

基本用法

比如下面这个 web component

<random-number prefix="hello" class="my-class"></random-number>

对应代码类似

import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter';
class RandomNumber extends HTMLElement {
  connectedCallback() {
    const prefix = this.getAttribute('prefix') || '';
    const shadow = this.attachShadow({mode: 'open'});
    const text = document.createElement('span');
    text.textContent = `${prefix}: ${Math.floor(Math.random() * 1000)}`;
    shadow.appendChild(text);
    setInterval(function () {
      const count = `${prefix}: ${Math.floor(Math.random() * 1000)}`;
      text.textContent = count;
    }, 2000);
  }
}
customElements.define('random-number', RandomNumber);

使用 amis 可以这样渲染出来

{
  "type": "web-component",
  "tag": "random-number",
  "props": {
    "prefix": "hello",
    "class": "my-class"
  }
}

其中 tag 指定标签，属性放在 props 对象里，props 里的值支持变量替换，比如：

{
  "data": {
    "text": "World"
  },
  "type": "page",
  "body": {
    "type": "web-component",
    "tag": "random-number",
    "props": {
      "prefix": "${text}"
    }
  }
}

属性表