Web Components 是一种创建可重用组件的标准化技术。它包括四个主要技术：Custom Elements、Shadow DOM、HTML Templates 和 HTML Imports。其中，Shadow DOM 是 Web Components 中最重要的技术之一，它可以让我们创建独立的 DOM 树，从而实现组件的封装和隔离。
在使用 Shadow DOM 时，我们可以使用 slot 元素来插入内容。但是，slot 的作用是将内容插入到 Shadow DOM 中，而不是在 Shadow DOM 内部进行布局。为了解决这个问题，我们可以使用 shadow slot。
什么是 shadow slot？
shadow slot 是指在 Shadow DOM 中使用的 slot 元素。它可以让我们在 Shadow DOM 内部进行布局，并且可以根据需要插入内容。与普通的 slot 不同，shadow slot 可以在 Shadow DOM 中创建一个“空位”，并在该空位中插入内容。
如何使用 shadow slot？
使用 shadow slot 非常简单，只需要在 Shadow DOM 中使用 slot 元素，并为其添加一个 name 属性即可。
// javascriptcn.com 代码示例
<template id="my-component-template">
<style>
:host {
display: block;
border: 1px solid black;
padding: 10px;
}
.header {
font-weight: bold;
margin-bottom: 10px;
}
.content {
margin-left: 20px;
}
</style>
<div class="header">
<slot name="header"></slot>
</div>
<div class="content">
<slot name="content"></slot>
</div>
</template>
<script>
class MyComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
const template = document.querySelector('#my-component-template');
const instance = template.content.cloneNode(true);
this.shadowRoot.appendChild(instance);
}
}
customElements.define('my-component', MyComponent);
</script>
<my-component>
<div slot="header">Header</div>
<div slot="content">Content</div>
</my-component>在上面的示例中，我们创建了一个名为 MyComponent 的 Web Component，并在其内部使用了 shadow slot。在模板中，我们为 slot 元素添加了 name 属性，并在相应的位置插入了内容。最后，在使用 MyComponent 的时候，我们可以像使用普通的 slot 一样，在其内部插入内容。
如何创建灵活的布局？
使用 shadow slot 可以让我们创建灵活的布局。例如，我们可以创建一个具有可变宽度的左右布局。
// javascriptcn.com 代码示例
<template id="left-right-layout-template">
<style>
:host {
display: flex;
border: 1px solid black;
}
.left {
flex: 1;
background-color: #eee;
}
.right {
flex: 2;
background-color: #ddd;
}
</style>
<div class="left">
<slot name="left"></slot>
</div>
<div class="right">
<slot name="right"></slot>
</div>
</template>
<script>
class LeftRightLayout extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
const template = document.querySelector('#left-right-layout-template');
const instance = template.content.cloneNode(true);
this.shadowRoot.appendChild(instance);
}
}
customElements.define('left-right-layout', LeftRightLayout);
</script>
<left-right-layout>
<div slot="left" style="width: 30%;">Left</div>
<div slot="right">Right</div>
</left-right-layout>在上面的示例中，我们创建了一个名为 LeftRightLayout 的 Web Component，并在其内部使用了 shadow slot。在模板中，我们使用了 flex 布局，并为左侧和右侧添加了不同的宽度。最后，在使用 LeftRightLayout 的时候，我们可以使用 style 属性来设置左侧的宽度，从而实现灵活的布局。
总结
使用 shadow slot 可以让我们在 Shadow DOM 中创建灵活的布局，并根据需要插入内容。在实际开发中，我们可以根据自己的需求来使用 shadow slot，从而实现更加灵活和可重用的组件。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6553bcecd2f5e1655dd723d2