为什么 Polymer 向（非阴影）dom 添加东西？ [复制]答案

【问题标题】：Why is Polymer adding stuff to the (non-shadow) dom? [duplicate]为什么 Polymer 向（非阴影）dom 添加东西？ [复制]
【发布时间】：2015-06-01 20:34:43
【问题描述】：

我正在使用聚合物 1.0，并且我有一个看起来像这样的 html 文件：

<html>
<head>
  <link rel="stylesheet" href="../vendors/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../vendors/bootstrap/dist/css/bootstrap.min.css">
  <!-- Polyfill Web Components support for older browsers -->
    <script src="../vendors/webcomponentsjs/webcomponents-lite.min.js"></script>
  <!-- 2. Use HTML Imports to bring in the elements. -->
  <link rel="import" href="../vendors/paper-button/paper-button.html">
  <link rel="import" href="../vendors/paper-header-panel/paper-header-panel.html">
  <link rel="import" href="../vendors/paper-toolbar/paper-toolbar.html">
  <link rel="import" href="../vendors/paper-drawer-panel/paper-drawer-panel.html">
  <link rel="import" href="../vendors/paper-icon-button/paper-icon-button.html">
  <link rel="import" href="../vendors/iron-icons/iron-icons.html">
  <link rel="import" href="../vendors/iron-icon/iron-icon.html">
  <link rel="import" href="../vendors/paper-item/paper-icon-item.html">
  <link rel="import" href="../vendors/paper-item/paper-item-body.html">
</head>
<body>
  <paper-drawer-panel>
    <paper-header-panel drawer>
      <paper-toolbar>
        <div>Application</div>
      </paper-toolbar>
      <paper-icon-item scope="paper-icon-item">
        <paper-icon-button icon="favorite"></paper-icon-button>
        <paper-item-body two-line>
          <div>Alphonso Engelking</div>
          <div secondary>Change photo</div>       
        </paper-item-body> 
      </paper-icon-item>  
    </paper-header-panel>
    <paper-header-panel main>
      <paper-toolbar>
        <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
        <div>Title</div>
      </paper-toolbar>
      <div>   Main content.. </div>
    </paper-header-panel>
  </paper-drawer-panel>
</body>
</html>

当我使用 Chrome 开发工具检查它时，我看到以下 dom：

Polymer 怎么会在 light dom 中添加 div？为什么东西不隐藏在shadow dom中？更具体地说，选定的 div 元素搞砸了样式，我该如何防止它弄乱布局？

【问题讨论】：

polymer-project.org/1.0/articles/…

标签： css polymer google-chrome-devtools shadow-dom

【解决方案1】：

从 1.0 开始，Polymer 使用 shadyDOM 作为所有浏览器的默认值（即使支持 shadow DOM）。这意味着即使在 chrome 上，本地 dom（阴影/阴影 dom 的聚合物名称）内的内容也会溢出到 light dom 上，并且可以使用 dom 操作 API 访问。

您可以通过调整全局聚合物 settings 来选择使用 shadow dom。

<script>
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = 'shadow';
</script>

【讨论】：