如何覆盖自定义元素继承中的部分<template>元素?
How to overwrite part of <template> element in custom element inheritance?
我有父自定义元素 BasicSwitcher,它有影子 dom html 模板:
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>
`;
现在我有另一个自定义元素 ModeSwitcher,继承自 BasicSwitcher。它有完全不同的开关。
有没有办法只覆盖模板的 controls-container
部分,同时仍然利用其他部分?该元素似乎不支持任何类型的继承。
1) 使用默认的 render() 方法为您创建 class 基本自定义元素。
class BasicSwitcher extends HTMLElement {
render() {
this.shadowRoot.innerHTML = baseTemplate
}
}
2) 为您继承的 Custum 元素扩展上述 class,并重新定义 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>
我有父自定义元素 BasicSwitcher,它有影子 dom html 模板:
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>
`;
现在我有另一个自定义元素 ModeSwitcher,继承自 BasicSwitcher。它有完全不同的开关。
有没有办法只覆盖模板的 controls-container
部分,同时仍然利用其他部分?该元素似乎不支持任何类型的继承。
1) 使用默认的 render() 方法为您创建 class 基本自定义元素。
class BasicSwitcher extends HTMLElement {
render() {
this.shadowRoot.innerHTML = baseTemplate
}
}
2) 为您继承的 Custum 元素扩展上述 class,并重新定义 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>