web:component

Table of Contents

About

A Web Component is HTML Custom Element that is optionally:

created in Shadow DOM (to scope the DOM)
using a HTML Templates

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:

Rendered by WebCode

Library

Polymer Demo (Used by github)

SEO

Just check what Googlebot see

Documentation / Reference