Skip to content

Instantly share code, notes, and snippets.

View joehonton's full-sized avatar
💭
Writing clean code one line at a time

Joe Honton joehonton

💭
Writing clean code one line at a time
View GitHub Profile
my-component {
--color: midnightblue;
--background-color: mintcreme;
--width: 700px;
--height: 500px;
}
:host {
--color: white;
--background-color: black;
--width: 70vw;
--height: 50vh;
}
#component {
color: var(--color);
background-color: var(--background-color);
{
"name": "my-component",
"version": "1.0.0",
"description": "a W3C standard web component",
"repository": {
"type": "git",
"url": "https://github.com/my-github-user-name/my-component.git"
},
"files": [
"my-component.html",
<head>
<script src='/my-component.js' type='module'></script>
</head>
async connectedCallback() {
var htmlFragment = await this.fetchTemplate();
var styleElement = await this.fetchCSS();
this.attachShadow({mode: 'open'});
this.shadowRoot.appendChild(htmlFragment);
this.shadowRoot.appendChild(styleElement);
}
a {
color: blue;
text-decoration: none;
border-bottom: 1px dotted blue;
}
a:visited {
border-bottom: 1px dotted purple;
}
a:hover {
border-bottom: 1px solid blue;
<body>
<h1>Hello World!</h1>
<my-component></my-component>
</body>
customElements.define('my-component', MyCustomComponent);