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

У меня есть родительский пользовательский элемент 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 шаблона, при этом используя другую часть? элемент, похоже, не поддерживает какое-либо наследование.

вы можете перегрузить метод, в котором вы определяете шаблон

— 25.03.2019 11:13

@Supersharp, перегрузка? Вы действительно имели в виду "перезаписать"? Не могли бы вы немного уточнить?

— 25.03.2019 12:36

shadow-dom custom-element html-templates javascript-inheritance

25.03.2019 07:14

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

198

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

1) Создайте класс для вашего базового пользовательского элемента с методом рендеринга() по умолчанию.

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

2) Расширьте указанный выше класс для вашего унаследованного пользовательского элемента, переопределите метод 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>

Вы - очень умный человек! ВПЕЧАТЛЯЮЩИЙ!

— 25.03.2019 22:51

25.03.2019 18:10