Как переписать часть элемента <template>в наследовании пользовательских элементов? - PullRequest
Новая
       49

Как переписать часть элемента <template>в наследовании пользовательских элементов?

1 голос
/ 25 марта 2019

У меня есть родительский пользовательский элемент BasicSwitcher, у которого есть html-шаблон shadow dom: 

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 Ответ

1 голос
/ 25 марта 2019

1) Создайте для вас класс Base Custom Element с помощью метода 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>
...