Angular `input` 元素没有被添加为 `shadow-root (open)` 的一部分

Question

我正在使用Angular10，而我的app-component.ts 如下所示：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom
})

我知道这将为组件的主机元素创建一个ShadowRoot。

现在，我在模板中添加input 元素，如下所示：

<div style='text-align: center'>
  <h1>Parent Component</h1>
  <br><br>
  <label>Parent Component: </label>

  <input type='text' #pInput name='myInput' />
  <button (click)='getInfo(pInput)'>Get Info</button>
</div>

当我检查创建的 DOM 时，我看到为 input 元素添加了 shadow-root (user-agent)。

我的问题是为什么input 元素没有作为shadow-root (open) 的一部分添加？ 什么情况下添加shadow-root（user-agent）？

Answer 1

<input> 有一个用户代理（浏览器）创建了 shadowDOM。
每个浏览器供应商实现<input> 不同。

您无法访问或更改该 shadowDOM。

同样适用于<video>、<audio> 和其他复杂元素。

创建一个仅包含这些元素的文档，并查看其他浏览器中的（样式）差异。

shadowDOM 不是新技术，
浏览器使用 shadowDOM 实现复杂的元素已有很长时间了（你只是没有看到）。

“新”部分是我们现在可以自己将 shadowDOM 应用于元素。

但仅限于元素：

• article, aside, blockquote, body, div, footer, h1, h2, h3, h4, h5", h6, header, main, nav, p, section, span

• 或自定义元素

来源：https://dom.spec.whatwg.org/#dom-element-attachshadow

Chromium DEV Tools 中有一个设置可以打开/关闭显示：