HTML slot属性测试实例页面

回到相关文章 »

效果：

我会替换掉默认文字，啦啦啦啦啦~

//zxx: 显示替换文字，而非默认文字

代码：

HTML代码：
<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>
JS代码：
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));
    }
  }
);