What is a Web Component?

About

A Web Component is HTML Custom Element that is optionally:

This is a technology that permits to package up styling and functionality into new, custom HTML tags that can be easily reused or shared with others.

This is used in the github website.

Template example

This is a basic example of a template without placeholder. Check the template page for more

  • Template
<template id="template-id">
  <style>
    p {
      color: white;
      background-color: #666;
      padding: 5px;
    }
  </style>
  <h1>Template</h1>
  <p>A template that appears only if Javascript add it to the page</p>
</template>
  • Javascript will add the template content
let template = document.getElementById('template-id');
let templateContent = template.content;
document.body.appendChild(templateContent);
// the second append has no effect
document.body.appendChild(templateContent);
  • Result:

Library

SEO

Just check what Googlebot see

Documentation / Reference





Discover More
HTML - Custom Tag / Element

A [[https://combostrap.com/frontmatter|frontmatter]] description shown on the Search Engine Result Pages
HTML - Template Element (Scripted HTML Fragment)

The template element is an HTML element that supports templating. It creates: fragments that can be cloned and/or inserted in the document via script (ie javascript). that can contain placeholder...
HTML Slot - A step by step on how to create a Template Placeholder

Slots allows to define placeholders in an HTML template TemplateShadow DOMcustom elementweb components Status Description Slotable The element that should be inserted in a slot Sloted The element...



Share this page:
Follow us:
Task Runner