@epa-wg/custom-element
Version:
Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating
184 lines (170 loc) • 9.63 kB
HTML
<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="module" src="../custom-element.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
button{ font-family: 'Roboto', sans-serif; color: darkcyan;}
body{ background-color: #DDE2F1;}
</style>
</head>
<body>
<custom-element tag="hex-grid">
<template id="hex-grid-template">
<style>
section{ filter: drop-shadow(0px 2px 3px rgba(50, 50, 0, 0.5)) }
:root {
--hex-grid-size: 8rem;
}
nav {
--hex-grid-size: 8rem;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: left;
margin-right: calc(var(--hex-grid-size)/2);
padding-bottom: calc(var(--hex-grid-size,8rem));
gap: 0.1rem;
section{
width: var(--hex-grid-size);
height: calc(1.53 *var(--hex-grid-size))
}
button {
display: flex;
flex-direction: column; align-items: center;
justify-content: center;
border: none;
width: var(--hex-grid-size,8rem);
min-width: var(--hex-grid-size,8rem);
height: var(--hex-grid-size,8rem);
padding: calc( var(--hex-grid-size,8rem)/8);
clip-path: polygon(50% 0, 100% 25%,100% 75%, 50% 100%, 0 75%, 0 25%);
&:hover,&:focus,&.focus{
transform: scale3d(0.9,0.9,0.9) ;
background-color: mediumaquamarine;
color: white;
}
img{ height: calc( var(--hex-grid-size,8rem)/2);}
}
section:nth-child(even){
width:0;
}
section:nth-child(even){
position: relative;
top: 50%;
button{
position: absolute;
top: calc(0.77*var(--hex-grid-size));
right: calc( -1* var(--hex-grid-size,8rem)/2);
}
}
}
</style>
<nav>
<for-each select="/datadom/payload/xhtml:*">
<if test="local-name(.) = 'style'">
<copy-of select="." />
</if>
<!-- sanitize blank spans -->
<if test="local-name(.) != 'style' and (local-name(.) != 'span' or normalize-space(.) != '')">
<section>
<button class="action">
{@alt}
<copy-of select="."/>
</button>
</section>
</if>
</for-each>
</nav>
</template>
</custom-element>
<!--<hex-grid>-->
<!-- <img src="wc-square.svg" alt="web component"/>-->
<!-- <img src="wc-square.svg" alt="123"/>-->
<!-- <span>Hey!</span>-->
<!--</hex-grid>-->
<hex-grid class="grid2x">
<img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
<img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
<img src="https://semantic-ui.com/images/logo.png" alt="Semantic UI" href="https://semantic-ui.com/"/>
<img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
<img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
<img src="https://refine.dev/img/refine_favicon.svg" alt="Refine" href="https://refine.dev/"/>
<img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap" href="https://getbootstrap.com/"/>
<img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg" alt="Vue.JS" href="https://vuejs.org/"/>
<img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>
<img src="https://redux.js.org/img/redux.svg" alt="Redux"/>
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg" alt="Svelte"/>
<img src="https://www.solidjs.com/img/logo/without-wordmark/logo.svg" alt="SolidJS"/>
<img src="https://www.svgrepo.com/show/354113/nextjs-icon.svg" alt="NextJS"/>
<img src="https://threejs.org/files/favicon.ico" alt="ThreeJS" href="https://threejs.org/"/>
<img src="https://www.blazejs.org/logo/icon.png" alt="BlazeJS"/>
<img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/tailwindcss.webp" alt="Tailwind CSS"/>
<img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/flowbite.webp" alt="Flowbite"/>
<img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/chakra-ui.webp" alt="Chakra-UI"/>
<img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/graphql.webp" alt="GraphQL"/>
<img src="https://dmtgy0px4zdqn.cloudfront.net/images/cloud-icon.png" alt="Meteor" href="https://www.meteor.com/"/>
<img src="https://www.svgrepo.com/show/508923/jquery.svg" alt="jQuery"/>
<img src="https://www.svgrepo.com/show/330899/materialui.svg" alt="Material UI"/>
<img src="https://mithril.js.org/logo.svg" alt="Mithril.js" href="https://mithril.js.org/"/>
<img src="https://seeklogo.com/images/M/materialize-logo-0FCAD8A6F8-seeklogo.com.png" alt="Materialize"/>
<img src="https://seeklogo.com/images/P/preact-logo-64E4BF9ABC-seeklogo.com.png" alt="Preact"/>
<img src="https://seeklogo.com/images/D/dojo-logo-E24E2CA700-seeklogo.com.png" alt="Dojo"/>
<img src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/backbone-js-icon.svg" alt="Backbone.js"/>
<img src="https://d3js.org/logo.svg" alt="D3.js"/>
<img src="https://lodash.com/assets/img/lodash.svg" alt="Lodash"/>
<img src="https://www.chartjs.org/img/chartjs-logo.svg" alt="Chart.JS" href="https://www.chartjs.org/"/>
<img src="https://glimmerjs.com/images/favicon.png" alt="Glimmer" href="https://glimmerjs.com/"/>
<img src="https://sarcadass.github.io/granim.js/favicon.ico" alt="Granim.js" href="https://sarcadass.github.io/granim.js/"/>
<img src="https://leafletjs.com/docs/images/favicon.ico" alt="leaflet.js" href="https://leafletjs.com/"/>
<img src="https://animejs.com/documentation/assets/img/favicon.png" alt="Anime.JS"/>
<img src="https://www.algolia.com/algoliaweb-static-favicons/light-mode/apple-touch-icon.png" alt="Algolia"/>
<img src="https://momentjs.com/static/img/moment-favicon.png" alt="Moment" href="https://momentjs.com"/>
<img src="https://omniscientjs.github.io/assets/favicon.ico" alt="Omniscient" href="https://omniscientjs.github.io"/>
<img src="https://aurelia.io/styles/images/aurelia-icon.svg" alt="Aurelia" href="https://aurelia.io"/>
<img src="https://emberjs.com/favicons/icon.svg" alt="EmberJS" href="https://emberjs.com"/>
<img src="https://ionicframework.com/apple-icon-57x57.png" alt="Ionic" href="https://ionicframework.com/"/>
<img src="https://webix.com/assets/favicons/favicon-96x96.png" alt="Webix" href="https://webix.com/"/>
<img src="https://images.ctfassets.net/vkdbses00qqt/3Id5VwofmvaFbjuSumaOmM/592c2d2e523187bd054a16b358d5a7ec/framework.svg" alt="Gatsby" href="https://www.gatsbyjs.com/"/>
</hex-grid>
<custom-element tag="hex-row">
<template>
<style>
hex-grid {
nav {
--hex-grid-size:6rem;
display: inline-flex;
padding-bottom: 0;
margin-right: 0;
section{ margin-right: 0.2rem; height: var(--hex-grid-size);}
button:has([selected]){ background-color: #2d4554; color: burlywood; }
}
}
</style>
<for-each select="/datadom/payload/xhtml:*">
<!-- sanitize blank spans -->
<if test="local-name(.) != 'span' or normalize-space(.) != ''">
<hex-grid>
<copy-of select="."/>
</hex-grid>
</if>
</for-each>
</template>
</custom-element>
<hex-row class="grid2x">
<img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/chakra-ui.webp" alt="Chakra-UI"/>
<img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/graphql.webp" alt="GraphQL"/>
<img src="https://dmtgy0px4zdqn.cloudfront.net/images/cloud-icon.png" alt="Meteor"/>
<img src="https://www.svgrepo.com/show/508923/jquery.svg" alt="jQuery" selected/>
<img src="https://www.svgrepo.com/show/330899/materialui.svg" alt="Material UI"/>
<img src="https://mithril.js.org/logo.svg" alt="Mithril.js"/>
<img src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/backbone-js-icon.svg" alt="Backbone.js" href="https://backbonejs.org/"/>
<img src="https://ionicframework.com/apple-icon-57x57.png" alt="Ionic" href="https://ionicframework.com/"/>
</hex-row>
<style>
.grid2x{--hex-grid-size:16rem; margin-top: 8rem; }
</style>
</body>
</html>