我正在制作一个自定义元素，它的功能是具有语法突出显示和其他一些功能的文本区.我已经将其简化为一个定制元素，其中包含一个div，当单击页面时会获得高度.
为了使自定义元素具有默认高度并能够因内容较多而增加高度，我使用了min-height: 40vh.问题是，映像DOM内的div中的height: 100%不起作用.它不会扩展到阴影DOM/自定义元素内部高度的min-height: 40vh%.但是，当需要时，自定义元素仍会增长以适合div.
请注意，自定义元素使用box-sizing: border-box并且也有一个边框.
我try 了以下几点:
我在Chrome和Firefox上都试过了，但它们都不能as desired%地在这两种浏览器上运行.
height: anything between 0 and 40vh on custom element
这是可行的，除非当div比自定义元素大时，自定义元素不会增长到适合div.
min-height: inherit on div
除非它包含自定义元素父元素的边框，否则这会起作用，默认情况下，使用box-sizing: border-box会使父元素的边框大于40vh.我希望自定义元素的值为min-height: 40vh和box-sizing: border-box.
Flexbox
自定义元素上的Flexbox不影响阴影根中的元素.
有问题的代码
请注意，StackOverflow doesn't give the snippet enough screen height to show the problem，然后单击"Expand snippet"并运行它也有同样的问题，so make sure to first start it and then click "Full page"，然后单击页面将使div变大.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
my-element {
border: 40px solid gray;
min-height: 40vh;
}
</style>
</head>
<body>
<my-element></my-element>
<script>
class MyElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: "open" });
const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync(`
* {
margin: 0;
padding: 0;
}
:host {
display: block;
}
div {
background: green;
width: 100%;
height: 100%; /* not working */
}
`);
shadow.adoptedStyleSheets = [stylesheet];
const div = document.createElement("div");
div.innerText = "Hello";
shadow.appendChild(div);
document.body.onclick = () => {
div.innerText += "\nHi";
};
}
}
customElements.define("my-element", MyElement);
</script>
</body>
</html>我可以用JS做一个黑客解决方案，但我想看看是否有一种方法可以只用CSS来做到这一点.