Polymer：为具有自定义 CSS 属性的 <content> 元素设置样式

Question

我有一个关于使用 ::content 选择器和自定义 CSS 属性设置样式的问题。任何反馈将不胜感激。

这是问题的简化版本。这里我有一个使用内容标签的 Polymer 组件。内容将始终是纸质输入：

<template>
  <style>
    #container ::content paper-input {
      --paper-input-container-focus-color: #ddd;
      margin: 8px;
    }     
  </style>
  <div id="container">
    <content></content>
  </div>
</template>

当我测试这个时，应用了边距，但自定义 css 属性没有应用。

我想要完成的事情是不可能的吗？

Answer 1

如果您使用的是 Polymer 1.6+。您可以使用 useNativeCSSProperties 打开 native css 来完成这项工作。如果您使用的是 1.7，那么我建议您使用 slot 而不是 content，因为这是聚合物在 V2.0+ 中迁移到的内容，它是 shadow dom v1 的一部分。虽然不确定它是否会在 IE 中工作，因为在 IE 中 useNativeCssProperties 没有效果

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<script>
  window.Polymer = {
    lazyRegister: true,
    useNativeCSSProperties: true
  }
</script>
<link rel="import" href="paper-input/paper-input.html">
<dom-module id="light-dom">
  <template>
    <style>
      #container ::slotted(paper-input) {
        --paper-input-container-focus-color: #ddd;
      }
    </style>
    <div id="container">
      <slot></slot>
    </div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'light-dom'
  })
</script>




<light-dom>
  <paper-input label="hello"></paper-input>
</light-dom>

Polymer：为具有自定义 CSS 属性的 <content> 元素设置样式

Polymer: Styling <content> elements with custom CSS properties

css

shadow-dom

polymer