embed-page

by suns2015

HTML

<h1> <a href="https://github.com/EPA-WG/embed-page">&lt;embed-page /&gt;</a> showcase </h1>

<script src="https://cdn.xml4jquery.com/ajax/libs/embed-page/0.0.20/build/esm-bundled/embed-page.js" type="module"></script>
<embed-page>
    <template>
        <style>a{   border-radius: 0.3em; margin: 0.2rem; padding: 0.2em;
                    cursor: pointer; background: silver;
                }
        </style>
        Set background to:
        <a class="green" onclick="setBackground(this)" tabindex="0">green </a>
        <a class="yellow" href="javascript:void(0)" onclick="setBackground(this)">yellow</a>
        <a class="blue" href="javascript:setBackground({innerText:'blue'})">blue  </a>
        <button onclick="byId.value = lastColor">get last color</button>
        <input placeholder="click button to see" id="byId">
        <a href="https://cdn.xml4jquery.com/ajax/libs/embed-page/0.0.20/build/esm-unbundled/demo/html-as-component.html?bla" id="reload">reload page</a>
        <script>
            var lastColor, color ;
            document.body.style.background = color;
            function setBackground(a)
            {
                byId.value = byId.style.background = lastColor = a.innerText.trim();
            }
        </script>
    </template>
</embed-page>
<p>
Note the same variables and callbacks acting in own <var>embed-page</var> scope.
</p>
<embed-page>
    <template>
        <style>a{   border-radius: 0.3em; margin: 0.2rem; padding: 0.2em;
                    cursor: pointer; background: silver;
                }
        </style>
        Set background to:
        <a class="green" onclick="setBackground(this)" tabindex="0">green </a>
        <a class="yellow" href="javascript:void(0)" onclick="setBackground(this)">yellow</a>
        <a class="blue" href="javascript:setBackground({innerText:'blue'})">blue  </a>
        <button onclick="byId.value = lastColor">get last color</button>
        <input placeholder="click button to see" id="byId">
       ...