环境: polymer 3
问题: 我已将::content 更改为::slotted，但样式不起作用:
改变前
.ContentWrapper,
.ScrollAndHeaderContainer,
:host ::content .my-data-grid--BaseHTMLWrapper {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
min-height: 0;
}
改变后
.ContentWrapper,
.ScrollAndHeaderContainer,
:host ::slotted(.my-data-grid--BaseHTMLWrapper) {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
min-height: 0;
}
我是这样用的:
<div class="my-data-grid--BaseHTMLWrapper">
此更改后样式不起作用。
有人可以给我解释一下为什么吗？我完全不知道。
最佳答案
这是一个可能有帮助的工作示例:
索引.hml :
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="custom-element.js"></script>
</head>
<body>
<custom-element>
<div slot = "test" class="my-data-grid--BaseHTMLWrapper" >SLOT TEST </div>
</custom-element>
</body>
</html>
自定义元素.js:
import { PolymerElement, html } from 'https://unpkg.com/@polymer/polymer@3.0.0-pre.13/polymer-element.js';
class CustomElement extends PolymerElement {
static get template() {
return html`
<style>
div ::slotted(.my-data-grid--BaseHTMLWrapper) {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
min-height: 0;
font-family: sans-serif;
color:red;
}
</style>
<div><slot name='test'></slot></div>
`;
}
}
customElements.define('custom-element', CustomElement);
关于css - 为什么将::content 更改为::slotted(..) 不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53431277/