Building Web Components with HTML Custom Elements
Custom Elements is a core part of Web Components, allowing developers to create reusable UI components natively through HTML, CSS, and JavaScript. 1. To create custom elements, you need to inherit HTMLElement and register with customElements.define(); 2. Use Shadow DOM to implement encapsulation isolation of styles and structures; 3. Respond to component state changes through life cycle hooks such as connectedCallback, attributeChangedCallback, etc.; 4. You can achieve data transmission and update through attribute listening or custom setters; 5. Use the <slot> slot mechanism to support content insertion. The entire process does not require any framework to rely on, which is suitable for improving component development capabilities and reducing dependence on frameworks.
Building Web Components with HTML custom elements is actually to implement reusable and well-encapsulated UI components without relying on the framework. This matter sounds a bit "advanced", but it is not difficult to do, especially suitable for those who want to improve component development capabilities or want to reduce their dependence on frameworks.
What are Custom Elements?
Custom Elements is part of the Web Components standard and allows us to create new HTML element tags, such as <my-button></my-button> or <data-card></data-card> . Browser native support, no additional libraries are required.
To register a custom element, the basic practice is to use customElements.define() method and inherit HTMLElement class:
class MyButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `<button>Click me</button>`;
}
}
customElements.define('my-button', MyButton); This way you can use <my-button></my-button> directly in HTML. Simply put, it is to write a class yourself and tell the browser: "I will define this tag."
How to add styles and behaviors?
One of the core advantages of Web Components is style isolation, which is achieved through Shadow DOM. You can write structure and styles like you would write plain HTML, but it will not affect other parts of the page.
For example, in the above MyButton class, you can add styles like this:
this.shadowRoot.innerHTML = `
<style>
button {
background: #007bff;
color: white;
padding: 10px 20px;
border-radius: 4px;
border: none;
cursor: pointer;
}
</style>
<button><slot></slot></button>
`;- Use the
<style>tag to write the style into shadowRoot. -
<slot>allows you to insert content, such as<my-button>提交</my-button>.
If you need event binding, you can operate it in the constructor or lifecycle hook:
this.shadowRoot.querySelector('button').addEventListener('click', () => {
console.log('button was clicked');
});How to use the life cycle hook?
Custom Elements provides some lifecycle callback methods, similar to React's useEffect or Vue's mounted:
-
connectedCallback: Triggered when an element is inserted into the page -
disconnectedCallback: fired when element is removed -
attributeChangedCallback(attrName, oldVal, newVal): triggered when the attribute changes -
observedAttributes: declare which attributes will trigger attributeChangedCallback
For example, suppose you want to listen for a property called disabled :
static get observedAttributes() {
return ['disabled'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'disabled') {
const button = this.shadowRoot.querySelector('button');
button.disabled = newValue !== null;
}
} This way, when the user sets <my-button disabled>按钮</my-button> , the internal button will also be disabled.
How to transfer data?
In addition to attributes, you can also pass data through attribute reflection or custom setter. For example, add a label attribute to the component:
set label(value) {
this._label = value;
this.shadowRoot.querySelector('button').textContent = value;
}
get label() {
return this._label;
}When using it, you can do this:
<my-button id="btn">Default text</my-button> <script> document.getElementById('btn').label = 'New Button Text'; </script>
This method is more flexible than purely attribute and is more suitable for complex data types.
Basically that's it. Custom Elements are not complicated, but they are easy to ignore details, such as the call timing of the life cycle, the management of shadowRoot, and how to communicate with external communication. Master these and you can write truly independent and easy-to-maintain components.
The above is the detailed content of Building Web Components with HTML Custom Elements. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
The `` vs. `` in HTML
Jul 19, 2025 am 12:41 AM
It is a block-level element, used to divide large block content areas; it is an inline element, suitable for wrapping small segments of text or content fragments. The specific differences are as follows: 1. Exclusively occupy a row, width and height, inner and outer margins can be set, which are often used in layout structures such as headers, sidebars, etc.; 2. Do not wrap lines, only occupy the content width, and are used for local style control such as discoloration, bolding, etc.; 3. In terms of usage scenarios, it is suitable for the layout and structure organization of the overall area, and is used for small-scale style adjustments that do not affect the overall layout; 4. When nesting, it can contain any elements, and block-level elements should not be nested inside.
Essential HTML Tags for Beginners
Jul 27, 2025 am 03:45 AM
To get started with HTML quickly, you only need to master a few basic tags to build a web skeleton. 1. The page structure is essential, and, which is the root element, contains meta information, and is the content display area. 2. Use the title. The higher the level, the smaller the number. Use tags to segment the text to avoid skipping the level. 3. The link uses tags and matches the href attributes, and the image uses tags and contains src and alt attributes. 4. The list is divided into unordered lists and ordered lists. Each entry is represented and must be nested in the list. 5. Beginners don’t have to force memorize all tags. It is more efficient to write and check them while you are writing. Master the structure, text, links, pictures and lists to create basic web pages.
How to add an image in HTML?
Jul 15, 2025 am 03:03 AM
The key to adding images in HTML is to use the img tag and set the properties correctly. First, you must use the tag and set the src attribute to specify the image path. Secondly, it is recommended to add the alt attribute to provide alternative text; the path can be a relative path or an absolute path, and you need to pay attention to case, format support and server configuration; in addition, the picture style can be controlled through CSS to enhance responsiveness and aesthetics.
Shadow DOM Concepts and HTML Integration
Jul 24, 2025 am 01:39 AM
ShadowDOM is a technology used in web component technology to create isolated DOM subtrees. 1. It allows the mount of an independent DOM structure on ordinary HTML elements, with its own styles and behaviors, and does not affect the main document; 2. Created through JavaScript, such as using the attachShadow method and setting the mode to open; 3. When used in combination with HTML, it has three major features: clear structure, style isolation and content projection (slot); 4. Notes include complex debugging, style scope control, performance overhead and framework compatibility issues. In short, ShadowDOM provides native encapsulation capabilities for building reusable and non-polluting UI components.
Preloading Resources with HTML `link rel='preload'`
Jul 19, 2025 am 12:54 AM
linkrel="preload" is a technology that optimizes page loading performance and is used to load critical resources in advance. Its core purpose is to prioritize loading of resources that are critical to home screen rendering, such as fonts, key CSS/JS and home screen images. Pay attention to when using: 1. Set the as attribute correctly to specify the resource type; 2. Avoid abuse and prevent excessive bandwidth usage; 3. Ensure that the resources will be actually used, otherwise it will cause waste of requests; 4. Add crossorigin attribute to cross-domain resources. Incorrect writing method such as the lack of the as attribute will cause the preload to be invalid. Rational use can improve page loading efficiency, otherwise it may be counterproductive.
What are the different types of lists available in html and their usage?
Jul 15, 2025 am 02:59 AM
HTML provides three list types to structure content. 1. Unordered list () is used for entries that require no order, such as function list or ingredients; 2. Ordered list () is used for sequential content, such as step description, and supports multiple numbering formats; 3. Description list (,,) is used to pair terms and descriptions, such as dictionaries or product specifications; in addition, it also supports nested lists, which can add sublists under the main entry to organize complex information, thereby improving page readability and accessibility.
Can you put a tag inside another tag?
Jul 27, 2025 am 04:15 AM
❌Youcannotnesttagsinsideanothertagbecauseit’sinvalidHTML;browsersautomaticallyclosethefirstbeforeopeningthenext,resultinginseparateparagraphs.✅Instead,useinlineelementslike,,orforstylingwithinaparagraph,orblockcontainerslikeortogroupmultipleparagraph
HTML `style` Tag: Inline vs. Internal CSS
Jul 26, 2025 am 07:23 AM
The style placement method needs to be selected according to the scene. 1. Inline is suitable for temporary modification of single elements or dynamic JS control, such as the button color changes with operation; 2. Internal CSS is suitable for projects with few pages and simple structure, which is convenient for centralized management of styles, such as basic style settings of login pages; 3. Priority is given to reuse, maintenance and performance, and it is better to split external link CSS files for large projects.
