explainer-widget-element.html

<style>
    @import "./telepathic-styles/telepathy.css";
    /* contain CSS to the parent of this, speeds up calculations and helps with browsers that need to polyfill webcomponents 1x */
    :host {
            display: block;
            contain: content;
    }
    h4{
        font-weight: lighter;
    }
    h5, h6 {
        font-weight: lighter;
    }
</style>
<section>
    <slot name="source"></slot>
    <div class="row">
        <div class="paper">
            <h4>${source.className}</h4>
            <h5>${source.tagName}</h5>
            <h6>${source.outerHTML}</h6>
            <p>${source.description}</p>
        </div>
        <div class="paper">
            <details>
                <summary>${source.className} JS</summary>
                <textarea value="${source.code}" rows="${source.jsCount}" disabled></textarea>
            </details>
            <details>
                    <summary>${source.className} Template Source Code</summary>
                    <textarea value="${source.template}"  rows="${source.lineCount}" disabled></textarea>
            </details>      
        </div>
    </div>
</section>