All you need is a browser and a basic understanding of HTML, CSS, and JavaScript classes to be productive!
Performance is the art of avoiding work.
Table of Contents
- Why Snuggsi?
- Easy Installation
- Browser Support
- Quick Tour
- Custom Elements
- Element Definition
- Class Description
- Template
Why Snuggsi?
- You prefer to be D.R.Y. and build reusable web components on a gradual learning curve.
- Because you probably don’t need a JavaScript Framework.
- You prefer convention over configuration.
- Web Components are ready for production & Custom Elements v1 has support for every modern greenfield browser.
Easy Installation
Made with Vanilla JS™. No need to learn Node.js, React, Webpack, Babel, or Gulp. You can if you want to use **snuggsi** with those tools. But you don’t need to!
Use The Platform: **snuggsi** works in a plain ol HTML file! Simply place the following <script> within your webpage:
<script nomodule src="https://unpkg.com/snuggsi"></script>Et Voila _(that’s it!)_
Browser Support
**snuggsi** provides a polyfill for the following native web platform features:
| Support | Edge* | Chrome* | Firefox* | Safari 9+ | Android* | iOS Safari* |
|---|
Quick Tour
**snuggsi** encourages convention over configuration using familiar techniques that are native to all browsers. People who are more comfortable with HTML should be able to start marking up their ideas immediately without extensive background in CSS or JavaScript.
Creating & Using Custom Elements
When picking a name for your custom element, there are a few naming conventions you must adhere to. For example, we can simply use `hello-world` for now.
HTML Declaration
If you know how to write HTML, you can start using **snuggsi**. You’ll typically begin with a plain old HTML element declaration:
<hello-world>Hello planet!</hello-world>Your custom element can be styled using CSS just like any other element:
<style>
hello-world {
background: #bada55;
}
</style>Element Definition
Every Custom Element MUST be defined within the CustomElementsRegistry. This can be easily achieved using **snuggsi**:
Element hello-world:
(class extends HTMLElement {
// Class definition goes here
})Class Description
Now that the Element is defined, we should add some functionality custom to your needs. Pass a class description to enhance your Custom Element further:
Element hello-world:
(class extends HTMLElement {
get planet() {
return 'world';
}
})Templates
The template is used to define custom element content for use within multiple elements. It can be quite beneficial when needing to separate a custom element definition into a web component or bind context to the template.
Troubleshooting
If you encounter issues during installation or usage of **snuggsi**, here are some common troubleshooting steps:
- Ensure that you have included your script tag correctly in your HTML.
- Check browser compatibility; make sure you are using a supported browser.
- If you face CSS styling issues, verify your selectors and styles.
- Refer to the documentation for ensure that you’re following proper syntax and guidelines.
For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.
At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.