Question

您好我想将样式应用于聚合物中的子元素。

我在同一个文件中有2个dom模块我想将样式从父级应用到dom

这是我的2 dom的

DOM1：

<dom-module id="nuxeo-document-blob" assetpath="nuxeo-document-blob/"><template>

<style include="nuxeo-styles">
  :host {
    display: block;
  }
  .row {
    @apply --layout-horizontal;
    @apply --layout-center;
  }

  .row .info {
    @apply --layout-vertical;
    @apply --layout-flex;
  }

  .row .actions {
    @apply --layout-horizontal;
    @apply --layout-center;
  }

  .detail {
    opacity: .5;
  }

  .actions ::content paper-icon-button {
    width: 36px;
    height: 36px;
  }
</style>

<nuxeo-connection user="{{user}}"></nuxeo-connection>

<template is="dom-if" if="[[blob]]">
  <div class="row">
    <div class="info">
      <div><a href="[[blob.data]]">[[blob.name]]</a></div>
      <div class="detail">[[formatSize(blob.length)]]</div>
    </div>
    <div class="actions" id="test_action">
      <nuxeo-slot slot="BLOB_ACTIONS" model="[[actionContext]]"></nuxeo-slot>
    </div>
  </div>
</template>

这是我的dom2：

<dom-module id="nuxeo-document-viewer" assetpath="nuxeo-document-viewer/"<template>
<style include="nuxeo-styles">
  nuxeo-dropzone {
    height: calc(80vh - 100px);
    display: block;
  }

  nuxeo-document-preview {
    width: 100%;
    height: calc(80vh - 100px);
    display: block;
  }

  nuxeo-document-blob {
    margin-top: 8px;
   /* display:none !important; */
  } 
  .testblob ::nuxeo-document-blob > .row .actions  {
    display:none !important;
  }
</style>

<nuxeo-dropzone document="{{document}}" hidden$="[[document.properties.file:content.data]]" update-document=""></nuxeo-dropzone>
<nuxeo-document-preview document="[[document]]" hidden$="[[!document.properties.file:content.data]]"></nuxeo-document-preview>
<div class="testblob">
<nuxeo-document-blob document="[[document]]" hidden$="[[!document.properties.file:content.data]]"></nuxeo-document-blob>
</div>

这里dom2是parent，dom1是child我想将样式应用于子内部元素类操作。

有没有办法在聚合物中使用它。

帮我解决问题。

提前致谢。

Answer 1

   .testblob nuxeo-document-blob ::content .row .actions  {
    display:none !important;
  }

尝试::slot而不是::content。

如何将样式应用于聚合物

1 个答案: