What is CWCO?

CWCO stands for Contextful Web Component and it is pronounced CUOCO.

It is a library that simplifies how you build Web Components with a powerful and simple API which under the hood uses the browsers native web components APIs.

This means that:

• Requires no build and works where Web Components are supported;
• It is lightweight since its dependencies are shipped with browsers;
• It is built on Web Standards and mimics native HTML DOM behavior and best practices;
• It is just an abstraction layer over the complex Web Component APIs;
• It is Object-Oriented like Components and DOM Elements;
• It is providing additional features and capabilities to create HTML tags;

What we mean by Contextful?

CWCO is built on this idea that DOM elements are just data that you manipulate to build web views. This data is stateful and changes with actions and events manually set by the developer.

For this reason every DOM element is associated with a metadata and a context state data which makes it possible for many features you will discover as you go through these documents.

Because the DOM is organized in a Tree data structure, a parent node data can be inherited by its descendants which is how data changes propagate down. Data flows up via events and context methods you set. CWCO does not re-invent the DOM, it just works with it allowing you to traverse it as you please.

This association of DOM elements and data allows for quick DOM updates and data to be shared deeply without you have to pass it via attributes from element to element.

This makes it, so it does DOM updates really fast.

Why CWCO?

CWCO is unique in its design. It is built to simplify how you build Web Components in order to promote this technology as the future way to build the web.

The wonders of CWCO become evident when you start to using it so here are some reasons why you should:

• Low learning curve: CWCO is just HTML, CSS and Javascript. It requires no additional knowledge to start since it is built on Web Standards.
• No build required: In a world of bundles and builds CWCO is a plug and play library with amazing features you won't believe it is shipped in a very small package.
• Use along with other libraries and framework: Because it is a plug and play library you can include it with any project built with React, Angular, Vue and Svelte.
• Build project-independent components: Components built with CWCO will work with any project. This is important to avoid having to convert a component library before using it. We believe in creating project-independent component libraries.
• Truly Reactive: CWCO components don't update the DOM only when you set a property. It will react to deep Array, Object Literal, Set, Map data changes which allows you to manipulate data normally. No additional syntax needed
• HTML & CSS data binding: CWCO allows you to change a particular part of your HTML and CSS when data changes with one-way data binding.
• Build directly in HTML: CWCO templates are the most advanced templates out there which allows you to build your view directly in HTML. No need to build everything on Javascript to then attach in the HTML page at runtime.
• Built-in context data handling: The most amazing feature of CWCO is the context data which allows you to set up data at the top level component which any component inside can access. This is great for data store , global data, theming, localization, user data, etc. Its application is limitless.
• Fast rendering: CWCO updates are fast and only target elements which needs to be updated. This is true even for long lists and complex component nesting.
• Automatic state management: CWCO knows what to update when data changes. You don't have to manage state. Simply set and update data and let CWCO handle the DOM for you.
• Powerful Directives: CWCO comes with few directives and the ability to create your own. CWCO directives are like HTML global attributes and allows you to override native attributes implementations like draggable and contenteditable.

There are so much more reasons to try that we can't wait to show you more.

You can see CWCO in action by following these usage examples or you can go ahead and go through the getting started guide.