https://github.com/JenniferSmith007/reusable_WebComponent_VanillaJS

Defining a custom HTML elements by creating a reusable comment element and making it dynamic with state.
https://github.com/JenniferSmith007/reusable_WebComponent_VanillaJS

custom-component custom-element dom html-elements shadow-dom state-management template vanilla-javascript web-components

Last synced: 3 months ago
JSON representation

Defining a custom HTML elements by creating a reusable comment element and making it dynamic with state.

• Host: GitHub
• URL: https://github.com/JenniferSmith007/reusable_WebComponent_VanillaJS
• Owner: JenniferSmith007
• Created: 2022-08-01T20:10:58.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-09-02T17:43:53.000Z (over 2 years ago)
• Last Synced: 2024-07-30T21:02:34.545Z (6 months ago)
• Topics: custom-component, custom-element, dom, html-elements, shadow-dom, state-management, template, vanilla-javascript, web-components
• Language: JavaScript
• Homepage:
• Size: 1.62 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
# 🔨 Building a Reusable Comment Component 🛠

### Project Description:

Defining a custom HTML elements by creating a reusable comment element.  The comment element with attributes to take in the content, you create an unlimited number of identically structured and styled comments with different content, and placing them by hand in the HTML. 

### Task: 

 - Use Custom Elements: Can take a name, email address, and  comment as an attribute.

- Display the name, email address, and attribute, in a custom layout that’s built-in to the component

### What was done: 

- Using the DOM, built a form and custom HTML element with attributes

    - created a template element to hold the information 

- Created a class that extends HTML 

    - using the class to attach Shadow DOM and append the template

- Defined the class and element with DOM customElements.define

#### * Second Branch explains how to make the comment component dynamic with basic state and built in Shadow DOM methods ➞ ➞ ➞