Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cogizmo/cogizmo
Base convenience SuperClass for vanilla WebComponents.
https://github.com/cogizmo/cogizmo
convenience vanilla vanilla-javascript vanilla-js web-components webcomponents
Last synced: 6 days ago
JSON representation
Base convenience SuperClass for vanilla WebComponents.
- Host: GitHub
- URL: https://github.com/cogizmo/cogizmo
- Owner: cogizmo
- License: isc
- Created: 2017-11-20T07:05:31.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-05T14:18:42.000Z (almost 6 years ago)
- Last Synced: 2024-10-13T03:20:57.898Z (about 1 month ago)
- Topics: convenience, vanilla, vanilla-javascript, vanilla-js, web-components, webcomponents
- Language: JavaScript
- Size: 184 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Cogizmo
Cogizmo is a convenience SuperClass for vanilla `` (Web Component). This is primarily used to load external ``, stylesheets and other assets so that your `` does not have to know the server filesystem architecture.
## Usage
1. Make a Custom Element class that extends Component
***MyComponent.js***
```
class MyComponent extends Cogizmo {
// Component implementation details
}
```
2. Start the resource linking and component registration
***MyComponent.js***
```
MyComponent.manage();
```
### Installation
Installation is very simple. Just place the required files in a web accessible directory.
1. Install Cogizmo to a web accessible directory.
2. Add Cogizmo to your document's `` element.
1. If you are using the module form (preferred), use:
```
```
2. If you are using the non-module form, use:
```
```
3. If using webcomponents polyfill, Cogizmo script must come after the polyfill.
### For Compatibility
Some browsers do not have the complete WebComponents spec implemented. As a result, some browsers may require the webcomponents polyfills. Webcomponents polyfill is a smart polyfill that only includes features that are not yet implemented.
1. Add `` to document ``
## Features
### External Templates
Using an external template file is as simple as placing a template.html file in your web component's root path. When `MyComponent.manage()` is called, it will automatically load the template and attach it to your class for attachment at construction time. *You did remember to call `super()`, didn't you?*
***template.html***
```
```
### External Stylesheet
External Stylesheets may be used by placing a `` in your ``. `MyComponent.manage()` auto-inspects the `` and attaches the CSS to your class' internal template property.
***template.html***
```
```
### Customizable ``
Unforunately, the web component spec does not allow for multiple instances of the same `ComponentClass` to use the same ``. This can be a problem as web components gain wider adoption. Future custom elements may extend, consume or otherwise depend upon earlier elements and version compatibility may become an issue if these code consumers rely on different versions of the same control. Cogizmo allows preemptive renaming of elements by use of a `tagname` custom attribute.
*This requires no changes or conformance to your custom element's code.*
***application.html***
```
```
### Custom Element Registration
Automatically calls `customElements.define()` for your `` utilizing the `MyComponent.is` property.
## Web Component Compatibility
Cogizmo can be loaded as a module or non-module with ease. Module form is the preferred method. However, some browsers have not fully implemented ES Modules. Additionally, many custom elements may be written without the ability to digest modules. As a result, Cogizmo has a number of loading options to allow the greatest compatibility, forward and backward.
### Browser Fallback Support
If you must support several browsing environments, it is typically better to add both the module and non-module form to your document.
```
```
This allows module enabled browsers to ignore the non-module, while out of date browsers will automatically ignore the module.
### Supporting Non-module Custom Elements with Cogizmo Module
Even if very few or none of your custom elements are ES Modules, you can still use Cogizmo as a module. When loaded, Cogizmo looks for the `use-global` attribute on its script tag. This method does not conflict with fallback support.
```
```