HTML part 属性

slot 全局属性将shadowdom shadow树中的一个slot分配给一个元素：具有slot属性的元素被分配给<slot>元素创建的slot，该元素的name属性的值与slot属性的值匹配。

实例

<!DOCTYPE html>
<html>
<body>
<template id="zxx-paragraph">
  <style>
    p {
      color: white;
      background-color: deepskyblue;
      padding: 5px;
    }
  </style>
  <p><slot name="zxx-text">我是默认文字</slot></p>
</template>
<zxx-paragraph>
  <span slot="zxx-text">我会替换掉默认文字~</span>
</zxx-paragraph>
<script>
customElements.define('zxx-paragraph',
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById('zxx-paragraph');
      let templateContent = template.content;
      const shadowRoot = this.attachShadow({
        mode: 'open'
      }).appendChild(templateContent.cloneNode(true));
    }
  }
);
</script>
</body>
</html>

运行一下

浏览器支持

属性
part	Yes	Yes	Yes	Yes	Yes

定义和用法

语法

slot="zxx-text"

HTML part 属性

实例

浏览器支持

定义和用法

语法

分类导航