如何在 Polymer 中访问孙元素的 css mixin？答案

【问题标题】：How to access a grandchild element's css mixin in Polymer?如何在 Polymer 中访问孙元素的 css mixin？
【发布时间】：2019-08-28 11:17:19
【问题描述】：

我有一个 Polymer 组件，它在其模板（按钮容器）中使用了另一个组件。所述子组件还使用另一个组件（按钮本身），当它被禁用时，我需要为该按钮添加一些样式。像这样的：

<dom-module id="parent-component">
  <template>
    ... template elements
        <confirm-buttons-container id="child-component" config$="[[someConfigVariable]]" ></confirm-buttons-container>

  </template>
</dom-module>

而子组件是这样的：

<dom-module id="confirm-buttons-container">
  <template>
      <dom-if if="[[config.buttons.primary]]">
        <template>
          <grandchild-component-button class$="[[config.buttons.primary.class]]">
            <button
              id="primaryBtn"
              name="primary"
              inner-h-t-m-l="[[t(config.buttons.primary.text)]]"
              disabled$="[[config.buttons.primary.disabled]]">
            </button>
          </grandchild-component-button>
        </template>
      </dom-if>
  </template>
</dom-module>

子组件有一个为孙子组件设置样式的 mixin，它也有一个为我要更改的属性设置样式的 mixin。当 config.buttons.primary.disabled 为 true 时，如何从父组件访问所述 mixin

提前感谢您的帮助。

【问题讨论】：

标签： css polymer polymer-2.x

【解决方案1】：

将此 CSS 添加到您的样式中：

 #parent-component #confirm-buttons-container [disabled="true"]{ color:red; }

【讨论】：

【解决方案2】：

首先，孙子的类/样式中必须有一个 mixin。如果没有，将无法访问。 https://polymer-library.polymer-project.org/2.0/docs/devguide/custom-css-properties#use-custom-css-mixins

【讨论】：