@epa-wg/custom-element

Version:
Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating
74 lines (58 loc) • 1.58 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>http-request Declarative Custom Element implementation demo</title>
    <link rel="icon" href="./wc-square.svg"/>

    <script type="module" src="../http-request.js"></script>
    <script type="module" src="../custom-element.js"></script>
    <style>
        @import "./demo.css";

        button {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            flex: auto;
            box-shadow: inset silver 0 0 1rem;
            min-width: 12rem;
            padding: 1rem;
            color: coral;
            text-shadow: 1px 1px silver;
            font-weight: bolder;
        }

        button img {
            max-height: 10vw;
            min-height: 4rem;
        }

        table {
            min-width: 16rem;
        }

        td {
            border-bottom: 1px solid silver;
        }

        tfoot td {
            border-bottom: none;
        }

        td, th {
            text-align: right;
        }

        caption {
            padding: 1rem;
            font-weight: bolder;
            font-family: sans-serif;
        }

        code {
            text-align: right;
            min-width: 3rem;
        }

        svg {
            max-height: 3rem;
        }
    </style>
</head>
<body>



        <custom-element src="./html-template.html#dwc-logo">
            <template><i>loading SVG from templates file ...</i></template>
        </custom-element>


</body>
</html>