Javascript CSS网格与混合shadowDOM/lightDOM的交互

我目前正在试验自定义元素中的插槽

请参见以下简单示例：

customElements.define（'x-y'，类扩展HtmleElement{
构造函数（）{
超级（）；
让template=document.createElement（'template'）；
template.innerHTML=`
：host{显示：块；自对齐：正常；}
div{
背景色：#666；
颜色：白色；
填充物：5px；
}
受来自ShadowDOM的样式的影响
`;
const shadowRoot=this.attachShadow({
模式：“打开”
}).appendChild（template.content.cloneNode（true））；
}
})

正文{
边框：2倍深红色虚线；
显示：网格；
高度：100vh；
网格模板行：最小最大值（0，1fr）；
保证金：0；
}
* {
框大小：边框框；
}
x-y>div{
背景色：#f0；
填充物：5px；
}
.内部网格{
显示：网格；
网格模板行：1fr 2fr；
身高：100%；
溢出：自动；
}

不受来自ShadowDOM的样式的影响

我用自己的代码试图理解你的问题

所以我把你的

.internalgrid

放在3列网格

元素上

你的问题#1

正如我们所见，.internalgrid的网格定义 在页面的CSS中，是否会影响页面内容的显示 阴影区

你在哪里看到这会影响阴影区的内容

你的意思是红色背景

阴影根被视为一个元素，占用空间，因此1fr

然后，

显示：网格；网格模板行：重复（3，1fr）；

在容器上将容器延伸到3倍（从而间接延伸其阴影根）高度

你的问题#2

我的第二个期望——这也违反了——是网格 容器使它的直接子对象成为网格单元，而 网格模板定义适用（如果有的话）。元素在其中是什么 影子王国是这样一个直率的孩子

槽（或实际上是槽内容/“分布式节点”）是网格中的直接子节点

    <slot name="A1"></slot>  <slot name="A2"></slot>            <slot></slot>
    <slot name="B1"></slot>  <span>gridded in shadowDOM</span>  <slot name="B2"></slot>

阴影中的网格

作为3x2网格工作

注:

• 插槽A2中没有任何内容，它不填充网格区域
• lightDOM中的2个元素进入默认插槽
  并填充2网格区域

div{
背景：浅绿色；
显示：网格；网格模板列：重复（3，1fr）}
：：开槽（*）{边框：3px绿色虚线}
阴影中的网格
游戏板{背景：红色；显示：网格；网格模板行：重复（3,1fr）}
游戏片{背景：浅蓝色}
到默认插槽！
从LIGHTHDOM网格化到默认插槽
定义（'game-board'，类扩展HtmleElement{
构造函数（）{
super（）.attachShadow（{mode:'open'}）
.append（document.getElementById（this.nodeName.content.cloneNode（true））；
}})
定义（'game-piece'，类扩展HtmleElement{
connectedCallback（）{
this.innerHTML=this.getAttribute（“插槽”）| |“无插槽”；
}})