Elix ES6 Mixins

Proof of concept loading a web component into wiki. component.kitchen/elix github

Uncheck `wiki` mode. Then copy the javascript below into the browser console. Then type into the newly added textarea.

async function getModule(url) { let script = document.createElement('script') script.type = 'module' script.src = url document.head.appendChild(script) document.head.removeChild(script) } getModule('https://wiki.dbbs.co/assets/es6/web-components.js') $('.code').after(`<p style="display:block; margin-bottom:15px;"> <elix-auto-size-textarea placeholder="this box expands as you type">`)

The main trick is `getModule`. I use the `web-component.js` asset to confirm that indirection works. Any module loaded this way, can `import` other modules.

I am especially happy to show that `getModule()` can co-exist with unmodified wiki client and load an ES6 module. Also, having loaded the `<elix-auto-size-textarea>` web component, we can insert that like any other tag using the existing jQuery library.

I'm especially excited that I was also able to try out this elix web component without using any javascript build machinery. Just plain old html and javascript. Well, I guess more like plain newfangled html and javascript.

In my experiments I have found one conflict. I cannot type into the web component with `wiki` mode checked.

es6