https://github.com/karesztrk/webcomponent-base

A Web Component base class
https://github.com/karesztrk/webcomponent-base

baseclass dom shadowdom webcomponent

Last synced: 3 months ago
JSON representation

A Web Component base class

• Host: GitHub
• URL: https://github.com/karesztrk/webcomponent-base
• Owner: karesztrk
• Created: 2024-07-20T13:22:56.000Z (6 months ago)
• Default Branch: master
• Last Pushed: 2024-07-27T14:15:47.000Z (5 months ago)
• Last Synced: 2024-10-02T06:43:52.700Z (3 months ago)
• Topics: baseclass, dom, shadowdom, webcomponent
• Language: JavaScript
• Homepage:
• Size: 12.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Web Component

My own Base class for all my Web Components. There are two versions: light and shadow.

## How to use

### Light component

Use if you want to encapsulate your logic within a special section of the HTML document.

```js

class YourComponent extends LightElement {

  static {

    this.register("your-component", YourComponent);

  }

  render() {

    // Regular DOM manipulation here here 😐

  }

}

```

### Shadow component

Useful if you want to encapsulate and completely detach your logic from the document. Neither the cascade, nor any other component will access it.

```js

class YourComponent extends ShadowElement {

  static {

    this.register("your-component", YourComponent);

  }

  render() {

    return "
👋 from the Shadow DOM
";

  }

}

```


## References

- https://developer.mozilla.org/en-US/docs/Web/API/Web_components