Skip to content

Instantly share code, notes, and snippets.

Avatar

Bernardo Cardoso BenOsodrac

View GitHub Profile
View WebComponents - using ::part.css
osui-section::part(title) {
border-bottom: 1px solid red;
}
View WebComponents - HTMLModules Import.html
<html>
<head>
<script type="module">
import { HTML5Element } from "./html5Element.html";
window.customElements.define("my-html5-element", HTML5Element);
</script>
</head>
<body>
<my-html5-element></my-html5-element>
View WebComponents - HTMLModules Import.html
<html>
<head>
<script type="module">
import { HTML5Element } from "./html5Element.html";
window.customElements.define("my-html5-element", HTML5Element);
</script>
</head>
<body>
<my-html5-element></my-html5-element>
View WebComponents - HTMLModules Export.html
<script type="module">
let moduleDocument = import.meta.document;
class HTML5Element extends HTMLElement {
constructor() {
super();
}
}
export { HTML5Element };
View WebComponents - ShadowDOM & CustomElements.js
class Card extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `
<style>.card { … }</style>
<div class="card">…</div>`;
View WebComponents - creating ShadowDOM.js
const header = document.createElement('header');
const shadowRoot = header.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>';
View WebComponents - styling customElement.css
osui-card:not(:defined) {
/* Pre-style, give layout, replicate card's eventual styles, etc. */
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
View WebComponents - extending HTMLElement.js
class OSUIButton extends HTMLButtonElement {}
customElements.define('osui-button', OSUIButton {extends: 'button'});
You can’t perform that action at this time.