不需要“编译”的前端富应用开发模式



目标:
  1. 功能全,自定性能高
  2. 速度快,

概念的核心是 Web Component,但 Web Component + Shadow DOM 是不适用于容器组件/APP,因为:
  • 不能使用 svg 符号 // `` 和 css ?
  • URL Hash 没用了 // 找不到具有该 id 的内置元素, :target 伪类也没用了
  • document.activeElement 没用了 // 好像可以模拟
  • document.addEventListener 小心用,有些事件默认不冒出 ShadowDOM // Event.target 不准确
  • 不方便集成 React/Vue 组件 // slot、gem-frame
  • 样式不能穿透(自定义样式);选择不到或者不能继承的属性需要重复写;
    // ShadowDOM 中使用 可以解决
    // ::slotted
    // 单层穿透 ::part,多层穿透 ::theme // 类似原生元素的伪类选择
    // Constructable Stylesheet Only actually parse the stylesheet when the first instance is connected.
  • 使用 class 来标记自定义元素状态可能和使用方冲突 // custom-states-and-state-pseudo-class
  • 不同重复定义元素(作为外部库时影响大)
    // 命名范围 // 名称可能会很长

https://forum.palemoon.org/viewtopic.php?f=1&t=24004 // 但是保存并不是那么重要
https://dev.to/richharris/why-i-don-t-use-web-components-2cia

模块化使用 ES6 Modules
  • HTTP2 Server Push 提前加载深层依赖 // 安装(skypack/jspm/npm 内容)依赖到本地
  • 无法单独为一个模块使用强制缓存
  • 如何使用依赖的打包/压缩版本?
JS 类型标记 // 使用 jsdoc/ts
ICON 使用自定义 ShadowDOM 元素(不能使用 SVG // 片段标识不能越边界,讨论
全局布局 CSS 阻塞渲染
组件使用 Web Component(包含组件样式)
// 每个 ShadowDOM 都有