https://github.com/ranjeetsinghbnl/stenciljs-javascript

Stenciljs component in any html javascript step by step guide
https://github.com/ranjeetsinghbnl/stenciljs-javascript

javascript microfrontend stencil stenciljs-components

Last synced: about 1 year ago
JSON representation

Stenciljs component in any html javascript step by step guide

• Host: GitHub
• URL: https://github.com/ranjeetsinghbnl/stenciljs-javascript
• Owner: ranjeetsinghbnl
• License: mit
• Created: 2019-09-01T12:57:03.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-09-15T13:16:06.000Z (over 6 years ago)
• Last Synced: 2025-01-21T15:49:59.614Z (over 1 year ago)
• Topics: javascript, microfrontend, stencil, stenciljs-components
• Language: HTML
• Size: 1.95 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Stencil component without a Framework

This is a step by step guide, how we can use a stencil component in a project without a JavaScript framework.

Integrating a Stencil component to a project without a JavaScript framework is straight forward.If you're using a simple HTML page, you can add your component via a script tag. 

## Similar guides

I have created another framework integration guide to use stencil components

* [Stencil components in Vue](https://github.com/ranjeetsinghbnl/stenciljs-vue)

* [Stencil components in React](https://github.com/ranjeetsinghbnl/stenciljs-react)

* [Stencil components in Angular](https://github.com/ranjeetsinghbnl/stenciljs-angular)

* [Stencil components in javascript](https://github.com/ranjeetsinghbnl/stenciljs-javascript)

This example use the stencil component from the following project

* [Product & Cart showcase example](https://github.com/ranjeetsinghbnl/product-mgmt-stenciljs)

## Using NPM package

For example, if we published a component to npm, we could load the component through unpkg like this:

```html

  

  

  

      body {

          background-color: #f7f7f7;

          margin-top: 3em;

      }

  



      


          


              

          

          


              

          

      

  


```

For more details you can also check the official [integration guide](https://stenciljs.com/docs/javascript).