使shadow dom中的元素具有最小高度和边框的自定义元素高度的100％，同时如果溢出也缩放父级

问题描述 投票：0回答：1

我正在制作一个自定义元素，它充当具有语法突出显示和其他一些功能的文本区域。我已将其简化为一个自定义元素，其中包含一个 div，单击页面时该元素会获得高度。

为了使自定义元素具有默认高度并能够因内容更多而增加高度，我使用了

min-height: 40vh
。问题是 Shadow dom 内 div 中的 
height: 100%
不起作用。它不会扩展到 Shadow dom 高度/自定义元素内部高度的 100%。然而，自定义元素仍然会在需要时增长以适应 div。

请注意，自定义元素使用 

box-sizing: border-box
并且还有边框。

我尝试过的：

我已经在 Chrome 和 Firefox 上尝试了所有这些方法，但它们都无法在任一浏览器上按预期工作。

height: anything between 0 and 40vh
自定义元素

此方法有效，除非当 div 增大到大于自定义元素时，自定义元素不会增大以适合 div。

div 上的 

min-height: inherit

此方法有效，但它包含自定义元素父级的边框，默认情况下使用 

box-sizing: border-box
会使父级变得大于 40vh。我希望自定义元素具有 
min-height: 40vh
和 
box-sizing: border-box
。

弹性盒

自定义元素上的 Flexbox 不会影响影子根中的元素。

有问题的代码

请注意，StackOverflow 没有为代码片段提供足够的屏幕高度来显示问题，单击“展开代码片段”然后运行它也会出现同样的问题，因此请确保先启动它，然后单击“完整页面” ，然后点击页面会让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 制作一个 hacky 解决方案，但我想看看是否有办法仅使用 CSS 来做到这一点。

css shadow-dom custom-element
1个回答
0
投票

您的 

div
占据了其父元素（即 
my-element
）高度的 100%。如果你想让它占据整个屏幕，那么你需要将其父级设置为 100% 高度。

<!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;
                height: 100%;
            }
        </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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.