12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
import XElement from './x-element.js';import Highlight from './highlight.js';
export default class XRoot extends XElement {
    example = `        import XElement from '/x-element.js';
        MyElement extends XElement {
            greeting: '',            greet () { this.greeting = 'Greeting'; }
            constructor () {                super();                this.greeting = 'Hello World';                this.shadowRoot.innerHTML = \`                    <h1>{{title}}</h1 >                    <button onclick="{{greet()}}">Greet</button>;                \`;            }
        }
        MyElement.define();    `;
    #html = /*html*/`        <section>            <h2>Vision</h2>            <h4>X-Element's vision is to provide an agnostic non framework that enhances custom elements with functionality and data binding that mimics native custom element standards.</h4>
            <h2>Features</h2>            <div class="tiles">                <div class="tile">                    <h4>&#128118; Simple</h4>                    <span>Simple to learning if you know custom elements you know XElement.</span>                </div>                <div class="tile">                    <h4>&#128230; Shareable</h4>                    <span>A single class to build a single component or an entire app.</span>                </div>                <div class="tile">                    <h4>&#9889; Fast</h4>                    <span>Tiny footprint ~15KB (minified and compressed).</span>                </div>                <div class="tile">                    <h4>&#127959; Framework Agnostic</h4>                    <span>Use XElement with any framework - React, Vue, Angular...</span>                </div>            </div>
            <h2>Example</h2>            <pre><code class="language-js">{{example}}</code></pre>        </section>    `;
    // constructor () {    //     super();    //     this.shadowRoot.innerHTML = '<slot></slot>';    // }
    connectedCallback () {        console.log('root connected');        if (this.innerHTML) return;        this.shadowRoot.innerHTML = '<slot></slot>';        this.innerHTML = this.#html;        requestAnimationFrame(() => {            Highlight();            // document.body.style.opacity = 1;        });    }
}
// XRoot.define();