What is the sign of Embedded Web Components? (Vue can be used to build standard Web Components)

Web Components are a collection of native browser APIs that let developers create reusable, custom HTML elements. These components can be integrated into legacy systems, static HTML, or even applications built with other frameworks.

A core feature of Web Components is the ability to create custom elements—HTML elements whose behavior and appearance are defined by the developer. These custom elements expand the set of available elements in the browser.

There are two main types of custom elements:

1. Customized built-in elements: These extend existing HTML elements, like <img> or <p>, adding new functionality to them.
2. Autonomous custom elements: These are independent elements built from the ground up, inheriting from the base HTMLElement class.

Once a custom element is registered, the browser will automatically call certain methods, known as lifecycle callbacks, when the element interacts with the page:

• connectedCallback(): Triggered when the element is added to the document. This is where custom setup logic should generally be placed, instead of in the constructor.
• disconnectedCallback(): Invoked when the element is removed from the document.
• adoptedCallback(): Called when the element is moved to a new document.
• attributeChangedCallback(): Executed when one of the element’s attributes is changed, added, removed, or replaced.

To register a custom element, use the define() method from Window.customElements. For example:

• To register a customized built-in element:javascriptCopy codecustomElements.define("word-count", WordCount, { extends: "p" });
• To register an autonomous custom element:javascriptCopy codecustomElements.define("popup-info", PopupInfo);

Once registered, these elements can be used in your HTML:

• For a customized built-in element: <p is="word-count"></p>
• For an autonomous custom element: <popup-info></popup-info>

Custom elements can also respond to HTML attributes, allowing for dynamic behavior. To make a custom element responsive to attribute changes, you must:

• Define a static property observedAttributes, listing the attributes to monitor.
• Implement the attributeChangedCallback() method, which reacts whenever an attribute is added, modified, or removed.

Here’s an example of a custom element that listens to changes in a size attribute:

javascriptCopy codeclass MyCustomElement extends HTMLElement {
  static observedAttributes = ["size"];

  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`Attribute ${name} has changed from ${oldValue} to ${newValue}.`);
  }
}

customElements.define("my-custom-element", MyCustomElement);

If an element has an observed attribute in its HTML declaration, the attributeChangedCallback() will be triggered when the element is first parsed, even if the attribute never changes again:

<my-custom-element size="100"></my-custom-element>

Just like standard HTML elements, custom elements can have different states, such as “hover” or “disabled.” These states can either be defined as HTML attributes or be internal to the element. Autonomous custom elements can also define their own states, which can be styled using the :state() pseudo-class. This pseudo-class can even be combined with other selectors like :host() or ::part() to apply styles to elements or their shadow DOM based on their current state.