Question

假设我有一个聚合物组件，其目的只是包含一些样板HTML;

<link rel="import" href="/packages/polymer/polymer.html"> 

<polymer-element name="form-group" noscript>
  <template>
    <div class="row form-group">
      <div class="col-xs-3">Blah</div>
      <div class="col-xs-6">
        <content></content>
      </div>
    </div>
  </template>
</polymer-element>

这会按预期呈现HTML，但CSS类不起作用，因为Shadow DOM与主项目CSS隔离。我相信可以在这里重新导入CSS;但是从我读过的内容来看，Shadow DOM似乎有点矫枉过正，所以我想避免它。

我在GitHub上找到了Allow creating polymer-elements without Shadow DOM，但它已被关闭，而且解决方案似乎只适用于polyfills。

我还发现了一些建议，我可以删除<template>标签，但这也不起作用（根本不会在页面中呈现任何内容，也没有错误！）。

我知道applyAuthorStyles，但它被移除了，我无法找到任何关于为什么或打算替换的信息。

Answer 1

我看到两种可能的解决方案：

使用穿透ShadowDOM的选择器

* /deep/ .row.form-group

创建外部CSS文件并将其链接到要应用它的每个模板

有一种方法可以在轻量级DOM中创建元素，但它有限，我很长时间没有看到它（我也从未使用过它）。

更多细节可以在这里找到：

如何创建继承父文档CSS的Polymer Dart组件？

1 个答案: