Skip to content

Instantly share code, notes, and snippets.

@thescientist13

thescientist13/hero.css

Last active February 21, 2024 18:49
Download ZIP

Revisions

  1. thescientist13 revised this gist Feb 21, 2024. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions hero.js
    View file
    Original file line number Diff line number Diff line change
    @@ -6,6 +6,10 @@ export default class HeroBanner extends HTMLElement {
    connectedCallback() {
    if(!this.shadowRoot) {
    this.attachShadow({ mode: 'open' });

    // with DOM Parts?
    // template.replace('some-binding', 'some value');

    this.shadowRoot.appendChild(template.content.cloneNode(true));
    this.shadowRoot.adoptedStyleSheets = [sheet];
    }
  2. thescientist13 revised this gist Feb 21, 2024. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion hero.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    // this vision aims to support the separation of concerns / technologies use case for GreenwoodJS
    // this vision aims to support the separation of concerns / technologies use case for Web Components
    import sheet from './hero.css' with { type: "css" };
    import template from "./hero.html" with { type: "html" };

  3. thescientist13 created this gist Feb 21, 2024.
    8 changes: 8 additions & 0 deletions hero.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    :host {
    text-align: center;
    margin-bottom: 40px;
    }

    :host h2 {
    font-size: 3em;
    }
    3 changes: 3 additions & 0 deletions hero.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <div class="hero">
    <h2>This is a really nice website!/h2>
    </div>
    15 changes: 15 additions & 0 deletions hero.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    // this vision aims to support the separation of concerns / technologies use case for GreenwoodJS
    import sheet from './hero.css' with { type: "css" };
    import template from "./hero.html" with { type: "html" };

    export default class HeroBanner extends HTMLElement {
    connectedCallback() {
    if(!this.shadowRoot) {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
    this.shadowRoot.adoptedStyleSheets = [sheet];
    }
    }
    }

    customElements.define('app-hero', HeroBanner)