https://github.com/dmccrthy/webpack-custom-elements

Create HTML custom elements dynamically with Webpack
https://github.com/dmccrthy/webpack-custom-elements

html javascript webpack

Last synced: 4 months ago
JSON representation

Create HTML custom elements dynamically with Webpack

• Host: GitHub
• URL: https://github.com/dmccrthy/webpack-custom-elements
• Owner: dmccrthy
• License: mit
• Created: 2025-01-06T06:12:39.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-15T04:22:25.000Z (about 1 year ago)
• Last Synced: 2025-08-09T19:02:14.924Z (10 months ago)
• Topics: html, javascript, webpack
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/webpack-custom-elements
• Size: 48.8 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Webpack Custom Elements

Dynamically add  custom elements to you Javascript using webpack.

## 🗒️ License

This package is provided under the MIT license, for more information see LICENSE.

## 🏁 Getting Started

1. **Install Package**

    

    In your webpack project run the following command to install the package.

    ```shell

    npm install webpack-custom-elements

    ```

2. **Setup Webpack Config**

    In your webpack config you will want to add a new rule in as shown below

    ```js

    module: {

        rules: [

            {

                test: /\main.js$/,

                use: [

                    {

                        loader: "webpack-custom-elements",

                        options: {

                            source: "./src/components",

                            keepElements: false,

                        },

                    },

                ],

            },

            // ...other rules

        ],

    },

    ```

    - **test:** 

        - The name of your **target javascript file** (ie: the one being imported into your HTML)

    - **source:** 

        - The **RELATIVE Path** to your components folder

    - **keepElements (Optional):** 

        - Determines if custom elements are preserved in HTML

        - Set to **true** or **false** (defaults to **false**)

3. **Create Custom Elements**

    In your specified source folder add an .html file which will contain you element. **Component files MUST be named in all lowercase with dashes.** This is required for HTML custom elements, you will get an error if you don't. 

    

    ```html

    

        Home

        About

        Contact

    

    ```

    

    Outside of that no special templating is needed; processing the HTML will be handled by the loader so its fine. To use your elements simply reference them by there name in your HTML. **Depending on the value of keepElements, the custom elements may be compiled out.**

    ```html

    

        

        // ...other elements

    

    ```

##

This project is a work in-progress and is likely to change overtime. If you find any bugs, or have feature requests feel free to fill out an issue.

-Dan