I have parent Custom Element, BasicSwitcher, which has its shadow dom html template:
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>
`;
Now I have another Custom Element, ModeSwitcher, inheriting from BasicSwitcher. It has completely different switches.
Is there a way to overwrite just the controls-container
part of the template, while still utilizing other part? the element doesn't seem to support any kind of inheritance.