Web Component总结

Web Component

一个Web组件通常由四个部分组成:模板、Shadow DOM、自定义元素与打包,其中Shadow DOM解决了组件在页面中的封装问题

Shadow DOM

有shadow Host(影子宿主)、shadow root(影子子树根节点)、 shadow Boundary(影子边界)、和shadow DOM nodes(影子节点)几个概念,其中后三者组成shadow DOM Subtrees(影子子树)

影子宿主是影子子树的依托,属于文档树

影子根节点对象提供常规DOM操作函数(getElementByID…)获取影子子树节点

来自页面并通过 标签添加到 shadow DOM 的内容被称为分布节点

不足

  • 外部不能获取DOM和操作DOM
  • 对屏幕阅读器、搜索引擎、浏览器扩展程序等不友好

优势

  • 隐藏实现细节
    • 实现细节被封装在元素的shadow root节点中
  • 避免非预期的修改
    • 外界无法获取到COM, 外部CSS样式对DOM无效
      • 除非非常明确指定,如采用伪类:::shadow or /deep/, /deep/能穿透多层影子边界
    • Shadow DOM中的css也无法应用在主文档上
      • 可以通过:host()/::content/:host-content()等特殊的方式修改组件的外观

template

  • 惰性,不会提前加载
    • 在使用前,模板内部的各种脚本不会运行、图像不会加载等
  • 内容不可见
    • 无法使用选择器获取到
  • 可被放置于任意位置
  • 分布式节点的使用不统一,如:
    • template中应用CSS需要使用到::content 伪类才能访问到。
posted @ 2015-08-18 19:07  mininice  阅读(674)  评论(0编辑  收藏  举报