Question

我正在使用Polymer创建一个Web组件。我想在:: host元素获得类gutter

时选择div full

<link rel="import" href="/polymer/polymer.html">
<dom-module id="smooth-header">
<style>
.full ::content gutter {
  color: red;
}
</style>
<template>
<content>
<div class="gutter"></div>
</content>
</template>
<script>....</script>
</dom-module>

但是我无法用上面的选择器选择装订线元素。

为什么上面的选择器会失败？

帮助您选择正确的替代方法。

Answer 1

您应该使用:host(selector)在主机元素上选择一个类：

:host(.fill) .gutter {
  color: red;
}

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-foo></x-foo>
  <x-foo class="full"></x-foo>

  <dom-module id="x-foo">
    <style>
      :host(.full) .gutter {
         color: red;
      }
    </style>
    <template>
      <content>
        <div class="gutter">
          <span>{{foo}}</span>
        </div>
      </content>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          properties : {
            foo: {
              type: String,
              value: "Hello world!"
            }
          }
        });
      });
    </script>
  </dom-module>
</body>

^codepen

聚合物：使用选择器

1 个答案: