<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>无内容无边框的隔离框</title>

</head>

<body>

    <!-- 外部容器 -->

    <div id="isolated-container"></div>


    <script>

        // 创建Shadow DOM实现完全样式隔离

        const container = document.getElementById('isolated-container');

        const shadowRoot = container.attachShadow({ mode: 'closed' });


        // 清空内容且移除所有边框样式

        shadowRoot.innerHTML = `

            <style>

                /* 移除所有边框和样式，保持容器结构但不显示视觉效果 */

                .inner-frame {

                    width: 100%;

                    height: auto;

                    /* 移除边框相关样式 */

                    border: none;

                    border-radius: 0;

                    box-shadow: none;

                    background-color: transparent; /* 透明背景 */

                    margin: 0;

                    padding: 0;

                }

            </style>

            <!-- 清空框内所有内容 -->

            <div></div>

        `;

    </script>

</body>

</html>