视图封装

1. 视图封装模式有哪几种

借用angular对三种视图模式的解释：

• ShadowDom 模式使用浏览器原生的 Shadow DOM 实现（参阅 MDN）来为组件的宿主元素附- 加一个 Shadow DOM。组件的视图被附加到这个 Shadow DOM 中，组件的样式也被包含在这个 Shadow DOM 中。(译注：不进不出，没有样式能进来，组件样式出不去。)

• Emulated 模式通过预处理（并改名）CSS 代码来模拟 Shadow DOM 的行为，以达到把 CSS 样式局限在组件视图中的目的。(译注：只进不出，全局样式能进来，组件样式出不去)

• None 意味着 Angular 不使用视图封装。 从本质上来说，这跟把组件的样式直接放进 HTML 是一样的。(译注：能进能出。)

2.shadow Dom的使用方法

参考博客

使用示例代码HTML代码，目标是在id为body的div下添加一个shadow包装的span元素

    <div id="body">body</div>
    <span>这个是对比元素</span> ```

使用如下代码实现上述目标

    //创建一个shadow添加到根元素下
    let shadowWrapper=document.getElementById('body');
    let shadow=shadowWrapper.attachShadow({mode:'open'})
    //创建一个需要进行视图封装的元素添加到shadow下
    let el=document.createElement('span')
    el.innerHTML='这是shadow-root下面的元素'
    shadow.appendChild(el)
    //为元素添加样式，该样式只对shadow下的元素有效
    let style=document.createElement('style')
    style.textContent=`span{color:red}`
    shadow.appendChild(style)

为了起到对比效果，说明shadow dom样式不进不出的特性，添加一个样式

    <style>
        span{
            font-size: 25px;
        }
    </style>

效果如下：

Dom如下：

shadow下的span只应用了color:red的样式，div外面的span只应用了fontSize:25px的样式