为什么 Polymer 向（非阴影）dom 添加内容？

Question

我使用的是 polymer 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：

为什么聚合物会向光 dom 添加 divs？为什么东西没有隐藏在阴影中dom？更具体地说，所选 div 元素搞砸了样式，如何防止它弄乱布局？

Answer 1

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

您可以选择使用阴影 dom，通过调整全局聚合物 settings。

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

为什么 Polymer 向（非阴影）dom 添加内容？

Why is Polymer adding stuff to the (non-shadow) dom?

css

google-chrome-devtools

shadow-dom

polymer