自定义组件web-component化

目前主要问题

生命周期执行顺序与微信不一致

微信	Tiny
component created	page load
component attached	component created
page load	component attached
page show	component ready
component ready	page show
page ready	page ready

根本原因是React生命周期与web-component生命周期的不一致

解决方案（猜想阶段）

• 渲染全部web-component化
• 使用lit、polymer等库

与此同时需要解决的问题

比较简单

• 事件系统问题
• style、animation属性处理

编译层处理事项（猜想）

• 模板引用

import { html } from 'lit';

import b from './b.wxml'
import c from './c.wxml'

// 自己定义的template
export const _ownTemplates = {}
// 自己定义的template + 外部import的template
const _templates = { ..._ownTemplates, ...c._ownTemplates }

const _html = html`
  <view>1212</view>
  ${b}
  ${_templates.a}
  ${_templates.c}
`

export default _html;

• template定义

const templateName = ''

customElements.define(templateName, class extends PolymerElement {
  static get is() { return templateName }
  static get properties() {
    return {
      data: { type: Object }
    }
  }

  static get template() {
    return html`
      <view bindtap="eventBinder" event-name="xx" >{{data.abc}}</view>
    `
  }

  eventBinder(e) {

  }

});

最终方案记录

1、 主要问题

• 生命周期与微信不一致
• 两套渲染机制（page和自定义组件走的mini版react， 内置组件走的web-component）

2、 预期

• 渲染机制保持一致
• 生命周期一致

3、 解决过程

一开始的想法时使用polymer或者lit这样的web-component组件库去实现，模板解析也交它们， 但是捣鼓了一天下来发现模板解析很不动态， 数据绑定也很死板，幸好生命周期是完全对上了。至此得出结论，web-compoent化是正确的，但是模板解析还是得走vdom实现，不然解析太麻烦了，因此上面提到的编译环节的处理就可以不用修改。

就在准备在polymer中使用react时，忽然想起omi这个库的web-component + jsx vdom能力。

魔改一下，成了，当然修改点肯定还是比较多的。