Convenience SuperClass for Custom Elements
npm install @cogizmo/cogizmo
class MyComponent extends Cogizmo {
// Component implementation details
}
`
2. Start the resource linking and component registration
MyComponent.js
`
MyComponent.manage();
`
$3
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.
$3
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
$3
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
`
`
$3
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
`
`
$3
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
`
`
$3
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.
$3
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.
$3
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.
`
``