Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@webcomponents/webcomponentsjs

Package Overview
Dependencies
Maintainers
2
Versions
69
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@webcomponents/webcomponentsjs

Web Components Polyfills

  • 1.0.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
164K
decreased by-14.3%
Maintainers
2
Weekly downloads
 
Created

What is @webcomponents/webcomponentsjs?

@webcomponents/webcomponentsjs is a polyfill library that enables the use of Web Components in browsers that do not natively support them. It provides polyfills for Custom Elements, Shadow DOM, HTML Imports, and Template, allowing developers to use these modern web standards across all browsers.

What are @webcomponents/webcomponentsjs's main functionalities?

Custom Elements

This feature allows you to define custom HTML elements. The code sample demonstrates creating a custom element called 'my-element' with a shadow DOM containing a paragraph.

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = '<p>Hello, World!</p>';
  }
}
customElements.define('my-element', MyElement);

Shadow DOM

This feature allows you to encapsulate styles and markup within a custom element. The code sample demonstrates creating a custom element with a shadow DOM that styles a paragraph.

class MyShadowElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = '<style>p { color: red; }</style><p>Shadow DOM Content</p>';
  }
}
customElements.define('my-shadow-element', MyShadowElement);

HTML Imports

This feature allows you to include HTML documents in other HTML documents. The code sample demonstrates importing an HTML file that contains a custom element.

import './my-component.html';

// Assuming my-component.html contains:
// <link rel="import" href="./my-element.html">
// <my-element></my-element>

HTML Template

This feature allows you to define HTML templates that can be reused. The code sample demonstrates creating a template with styles and content, and then appending it to the document body.

const template = document.createElement('template');
template.innerHTML = '<style>p { color: blue; }</style><p>Template Content</p>';

document.body.appendChild(template.content.cloneNode(true));

Other packages similar to @webcomponents/webcomponentsjs

Keywords

FAQs

Package last updated on 11 May 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc