Trying to adhere to the DRY principal, I wanted to create a custom component based on a <template>. The code looked something like this (please forgive the corner-cutting as I'm typing this on a phone after an all-nighter):
// base.html
<template id="player">
<div class="card">
<div class="card-body">
<slot name="user-username"></slot>
</div>
</div>
</template>
// app.js
class PlayerCard extends HTMLElement {
constructor(){
super();
let tmpl = querySelector...;
this.appendChild(tmpl.content.cloneNode();
}
}
define('player-card', PlayerCard);
// index.html
{% for user in users %}
<player-card>
<div slot="user-username">{{ user }}</div>
</player-card>
{% end for %}
But after smashed dreams and long hours of research, I learned that slots can only be used in Shadow DOMs. The problem with using SDOM is that the internal styling is protected and can't be directly influenced by the external CSS.
This means that, at one hand, i can't inject the data to the template instance, nor can I use Shadow DOM without having to reimplement Bootstrap.
And I'm stuck. To my brain, there must be a way to make this work but my brain is unable to find it — either because it's too complex, or it's too trivial and easy.
Any suggestions please?
