![image](https://user-images.githubusercontent.com/2480762/202872370-47c0a715-7028-4234-9bcf-48f8613ec8b3.png)
starting with something like this and make it a webcomponent with shadow dom. There will be more iterations, but start with a simple one that has top,left,bottom,right,back,front
It is partially implemented in prototype branch, time to move to main.
interesting nasty issue with shadow dom if innerHTML is used in wrong way, css variables fail to work as expected (at least as expected by me)
if I use
export class Gizmo extends HTMLElement {
#root
connectedCallback() {
this.#root = this.attachShadow({ mode: 'open' })
this.innerHTML = `<div class="cube">.....
it works ok, but css variables are not working for inner elements
and to fix it innerHTML
needs to be called on shadowRoot
export class Gizmo extends HTMLElement {
#root
connectedCallback() {
this.#root = this.attachShadow({ mode: 'open' })
connectedCallback() {
this.#root = this.attachShadow({ mode: 'open' })
this.#root.innerHTML = `<div class="cube">.....
nice tutorial on one of my fav sites: https://css-tricks.com/an-introduction-to-web-components/
this.#root.innerHTML = `<div class="cube">.....
nice tutorial on: https://css-tricks.com/an-introduction-to-web-components/