Как применить стили к дочерним элементам в полимере

Привет, я хочу применить стили к дочерним элементам в полимере.

у меня есть 2 модуля DOM в одном файле, я хочу применить стиль от родителя к DOM

Вот мои 2 дома

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>

Вот мой дом2:

<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 является родительским, а dom1 - дочерним, я хочу применить стили к действиям класса дочерних внутренних элементов.

Есть ли способ применить это в полимере.

помогите мне решить проблему.

Заранее спасибо.

1 ответ

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

Пытаться ::slot тоже вместо ::content,

Другие вопросы по тегам