@kcjpop/x-browser-compat
Version:
A Web Component to display browser compatibility data
98 lines (75 loc) • 2 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
x-browser-compat :: A Web Component to show browser compatibility data
</title>
<style>
x-browser-compat {
display: grid;
gap: 0.5em;
&::part(browser) {
font-weight: 700;
}
&::part(name)::after {
content: ":";
}
&::part(support) {
color: green;
}
&::part(no_support) {
color: red;
&::after {
content: "❌";
}
}
&::part(unknown) {
color: gray;
&::after {
content: "-";
}
}
}
.beautiful {
}
</style>
</head>
<body>
<main>
<h1>x-browser-compat</h1>
<h2>Introduction</h2>
<p>A Web Component to display browser compatibility data.</p>
<h2>Installation</h2>
<h2>Demos</h2>
<x-browser-compat></x-browser-compat>
<x-browser-compat path></x-browser-compat>
<x-browser-compat path=""></x-browser-compat>
<x-browser-compat path="foo.bar"></x-browser-compat>
<x-browser-compat
path="javascript.builtins.Array.toLocaleString"
></x-browser-compat>
<hr />
<x-browser-compat
class="beautiful"
path="html.global_attributes.autocapitalize"
browsers="safari, edge, chrome"
></x-browser-compat>
<hr />
<x-browser-compat
path="html.global_attributes.autocapitalize"
browsers
></x-browser-compat>
<hr />
<x-browser-compat
path="html.global_attributes.autocapitalize"
browsers=""
></x-browser-compat>
</main>
<script type="module">
import { XBrowserCompat } from "./index.js";
window.customElements.define("x-browser-compat", XBrowserCompat);
</script>
</body>
</html>