Question

嵌入＆lt;模板＆gt;在＆lt; dom-module＆gt;中，我在＆lt; template＆gt;中找到每个子元素。已添加一个className，与组件名称相同。为什么Polymer设计如此？有什么考虑吗？我怎么能避免这个？

e.g：

<dom-module id="my-greeting">
  <template>
    <style include="shared-styles"></style>
    <style>
      :host {
        display: block;
      }
    </style>
    <h2 class="page-title">{{greeting}}</h2>
    <span class="paper-font-body2">Update text to change the greeting.</span>
    <!-- Listens for "input" event and sets greeting to <input>.value -->
    <input class="paper-font-body2" value="{{greeting::input}}">
  </template>

  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'my-greeting',

        properties: {
          greeting: {
            type: String,
            value: 'Welcome!',
            notify: true
          }
        }
      });
    })();
  </script>

</dom-module>

浏览器中的dom结构是：

<my-greeting class="x-scope my-greeting-0">
  <h2 class="page-title style-scope my-greeting">Welcome!</h2>
  <span class="paper-font-body2 style-scope my-greeting">Update text to change the greeting.</span>
  <!-- Listens for "input" event and sets greeting to <input>.value -->
  <input class="paper-font-body2 style-scope my-greeting">
</my-greeting>

my-greeting中的每个子元素都有一个className＆＃39; my-greeting＆＃39;。

Answer 1

当不支持shadow DOM时，它们是如何填充缺少css隔离的。

在Chrome中，您必须为聚合物手动启用原生阴影DOM使用，否则您将看不到该行为。添加

window['Polymer'] = window['Polymer'] || {};
window['Polymer']['dom'] = 'shadow';

在您的页面上包含聚合物组件之前，您将获得本机阴影支持。

Answer 2

乍得的答案是对的。

我查看Polymer的源代码，找到执行此操作的源代码：https://github.com/Polymer/polymer/blob/master/src/lib/style-transformer.html#L110。对此函数有一个注释：给定一个cssText和一个作用域字符串（作用域）的字符串，返回一个作用域的css字符串，其中每个选择器都被转换为包含从作用域创建的类。还会转换ShadowDOM选择器（例如：host）以使用作用域选择器。

为什么Polymer会自动为子元素添加类？

2 个答案: