css - Polymer:使用自定义 CSS 属性设置 元素的样式

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 因为这是 polymer 在 V2.0+ 中迁移到的内容，它是影子 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>