zoukankan      html  css  js  c++  java
  • 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 伪类才能访问到。
  • 相关阅读:
    mvc session验证
    mvc登录验证
    PHP中return的用法
    mvc框架类
    php mvc实现比赛列表
    php MySQLDB类
    php header的几种用法
    php isset()与empty()的使用
    jenkins+springboot+svn linux 自动化部署
    基于netty的websocket例子
  • 原文地址:https://www.cnblogs.com/mininice/p/webcomponent.html
Copyright © 2011-2022 走看看