Question

我有一个父级自定义元素BasicSwitcher，它具有阴影dom html模板：

map

现在，我有另一个自定义元素ModeSwitcher，它继承自BasicSwitcher。它具有完全不同的开关。

有没有办法仅覆盖模板的const template_basic_switcher = document.createElement('template'); template_basic_switcher.innerHTML = ` <style> @import url("https://use.fontawesome.com/releases/v5.6.3/css/all.css") </style> <div id="controls-container"> <span>ON</span> <span>OFF</span> </div> `;部分，同时仍然利用其他部分？该元素似乎不支持任何继承。

Answer 1

1）使用defaut render（）方法为您创建基础自定义元素类。

class BasicSwitcher extends HTMLElement {
    render() {
        this.shadowRoot.innerHTML = baseTemplate      
    }
}

2）为继承的Custum元素扩展上述类，并重新定义render（）方法，并使用对新模板的引用。

class ModeSwicher extends BasicSwitch () {
    render() {
        this.shadowRoot.innerHTML = otherTemplate      
    }
}

下面是一个有效的代码段：

class BasicSwitcher extends HTMLElement {
    constructor() {
        super()
        this.attachShadow( { mode: 'open' } )
        this.render()
    }
    render() {
        this.shadowRoot.innerHTML = BS.innerHTML
    }
}
customElements.define( 'basic-switch', BasicSwitcher ) 

class ModeSwitcher extends BasicSwitcher {
    render() {
        this.shadowRoot.innerHTML = MS.innerHTML
    }
}
customElements.define( 'mode-switch', ModeSwitcher )

<template id=BS>
  <style> :host { display: inline-block ; border: 1px solid gray } </style>
  <span>Basic Switch</span>
</template>

<template id=MS>
  <style> :host { display: inline-block ; border: 1px dotted blue ; color: red } </style>
  <span>Mode Switch</span>
</template>

<basic-switch></basic-switch>

<mode-switch></mode-switch>

如何在自定义元素继承中覆盖<template>元素的一部分？

1 个答案: