vanillawc / Vanillawc

Introduction

Welcome to the vanilla Web Components (WC) organization. This is a collective of independent Open Source devs with one goal. To create, share, and promote the use of completely vanilla WC implementations.

That means: no extra layers of abstraction between the WC spec and the implementations here; no extra dependencies to track, maintain, update; no extra build steps to develop.

If the criticisms of the WC standard are really true, that the API to develop vanilla WC is 'too low level', then this group exists to get low level and see what it's all about.

Components

• WC-Arrow - A web component for creating custom arrow HTML elements
• WC-Blink - A clone of the classic <blink> element
• WC-Bullet-Chain - A list with a fancy custom decorator
• WC-Carousel-Lite - A web component that wraps HTML elements and forms a horizontal carousel slider
• WC-Code - run code in the browser, disclaimer : this repo is too awesome
• WC-CodeMirror - Easily embed a CodeMirror editor
• WC-CSV-Table - Create a table element from CSV data
• WC-DatePicker - A web component that wraps a text input element and adds date-picker functionality to it
• WC-Demo - An web component for demoing other web components
• WC-Icon-Rule - A spicy horizontal rule
• WC-Include - Import HTML from an external file
• WC-JSON - Graphical view of a json object
• WC-Markdown - Embed Markdown with optional syntax highlighting
• WC-Marquee - A clone of the classic <marquee> element
• WC-Menu-Wrapper - A web component that wraps HTML elements and forms a drop-down menu out of them
• WC-Monaco-Editor - Easily embed VSCode's Monaco editor
• WC-Resume - Embed resume.json content styled with a template
• WC-Router - go up, go down, now turn left, nope its not there
• WC-Social-Link - Add links to social profiles the easy way
• WC-Sortable-Table - A table element that sorts when a header is clicked
• WC-Template - HTML templating using tagged template literals

How to Contribute

If you have built a WC of your own and think it would be a valuable contribution to the org. Create a Showcase issue.

If you have a suggestion for a new WC that you'd like to share. Create a Proposal issue.

If you have a suggestion or would just like to spark a discussion about WC. Create a Discussion issue.

Recommendations

DON'T

• Rely on any additional layers of abstraction (ex polymer, lit)
• Require additional build steps for development (ie prod is OK)
• Attack others (ie ad hominem), keep the conversation civil or you will be banned

DO

• Prefix your WC repos with wc-
• Encapsulate your code WCs wherever possible
• Build your components for maximum reuse
• Support Accessibility wherever possible
• Choose copyleft-friendly licenses¹
• Feel inclined to share your ideas, this is a space for exploration
• Share in whatever capacity you are able, code isn't the only way to contribute
• Make sure to read Web Component Best Practices
• Have fun

¹ Specifically, avoid Open Source licenses with special patent clauses. No proprietary/copyright content. When in doubt, use MIT.

Other Web Component Collections

• Spectrum Web Components - By Adobe
• ELMS Learning Network - By Penn State
• Lion - By ING Bank
• Patternfly Elements - By RedHat
• BulibWC - By Boston University

Resources

• Web Components Interoperability Lab - Interoperability demos for integrating Web Components with frameworks
• Custom Elements Everywhere - Framework compatibility with standard Web Components
• Web Components: From Zero to Hero - An introduction to writing standard Web Components
• Web Components The Right Way - Awesome list of Web Component resources
• WebComponents.org - Community directory of published Web Components and Web Component Collections
• Open-WC.org - Guidance and tooling for working with LitElement Web Components

Licenses

This repository is dual-licensed

• source code is licensed under the MIT license
• written content, and other assets (ex SVG) are licensed under the CC-BY-SA-4.0