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