New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

Paving The Way For A Web Components Based DNN Future

Paving The Way For A Web Components Based DNN Future

Are you tired of JavaScript Framework Churn? Perhaps some of my latest development efforts will help brighten your day and improve your outlook for future DNN development possibilities. While this project is in the early stages, I am so excited about it and wanted to go ahead and share what I am working on for the DNN community. I believe this contribution will have similar, if not greater, impact to future DNN development as some of my previous open source contributions.

Web Components

Have you heard of Web Components yet? If not, head on over to this Introduction to Web Components. There you will find links to the various Specifications that make up Web Components. It is exciting for modern web development and establishes a means for components that are no longer framework dependent.

Framework Dependent Components

If you are an Angular, Vue.js, React or similar JS framework developer, the concept of components is not a new one. This is the way we build modern applications. We create components for various elements and features within our applications. Then we tie them all together in an interactive fashion to make an application work as a whole.

Framework Independent Components

Unlike the above framework dependent components, Web Components are a new browser feature that provides a standard component model for the Web. These take advantage of new standards such Custom Elements, Shadow DOM, HTML Templates, and more.

Web Components Tooling

There are several great projects out there for helping developers to create Web Components based on the W3C Web Components Specification. Polymer and SkateJS are two early pioneers in this space. A more recent player that is catching the attention of many is Stencil. Each solution has its pros and cons.


Being an Ionic developer for mobile apps and progressive web apps (PWA) myself, Stencil caught my eye early on because it is what the folks at Ionic created to help them build all the new web components for Ionic 4. As a bit of history, Ionic 1 was based on AngularJS (v1). Ionic 2/3 were based on Angular 2/3/4 components. To help Ionic become framework agnostic and reach a broader developer audience for mobile app and PWA development, the move to pure web components was necessary. Therefore, they created Stencil to help them through that process and they have shared the goodness by open-sourcing Stencil. As a by-product, Angular developers can use Stencil to create their own Web Components to be used in any framework, or even no framework at all using pure HTML and JavaScript.

A New Collection of Web Components

Now that we have a good background established, let me tell you more specifically about what I'm cooking up in the kitchen! To date I have been focused on establishing a solid project structure and development workflow for creating a new collection of Web Components. I wanted this new collection of Web Components to also be easily consumable for developers via Node Package Manager (npm).

These goals have now been achieved and the initial commit of nvQuickComponents has been made on GitHub. An npm organization has been created and an early version of nvq-components has been published. nvQuickComponents is yet another great open source contribution from nvisionative to our fantastic DNN Community (and beyond)!

As of the writing of this article, two Web Components have been developed. Not only can these be used within the context of a DNN extension, they can also be used in any web application that has an HTML front end.

<nvq-progress-bar />

The first one is nvq-progress-bar. This is a simple progress bar that is more of a proof of concept. This web component was used to "kick the tires" a bit with Stencil and to help initially setup the project structure and get a good development workflow established. Though this is not a polished component at this time, it does a great job of illustrating a few key concepts.

  • It takes full advantage of the Shadow DOM.
  • It uses the @Element decorator to access the host element within the class instance. This returns an instance of an HTMLElement, so standard DOM methods/events can be used.
  • It utilizes @Prop decorators for configurability via HTML attributes using dash-case on the Custom Element, via JSX attributes using camelCase, or via JavaScript accessing the Custom Element.
  • It utilizes custom SCSS variables, or shorthand properties, to allow for style manipulation from within the component and/or by the developer utilizing the component.

Here is what the nvq-progress-bar looks like.


Try It Out Yourself

Check out this HTML example for a simple implementation of this web component. Try updating the property values via JavaScript in the browser Console and you'll see how it updates immediately! Here is some code for quick reference.

const nvqProgressBar1 = document.querySelector('nvq-progress-bar');
nvqProgressBar1.value = 22;
nvqProgressBar1.max = 50;


<nvq-editor />

One that is much more involved is nvq-editor. This web component leverages the vastly popular Quill. Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need. So far, we have implemented basic usage of the editor.

I have exposed some common attributes via @Prop decorators, some of which are mutable. An example is conditional loading of the proper CSS for the Quill theme, based on the theme custom element attribute value.

I have begun work on several custom events via @Event decorators and I have implemented a CustomOptions interface.

Here is what the nvq-editor looks like using the bubble theme.

<nvq-editor theme="bubble"></nvq-editor>

nvQuickEditor Demo 1

Here is what the nvq-editor looks like using the snow theme.

<nvq-editor theme="snow"></nvq-editor>

This screenshot is using a minimalist editor feature set

nvQuickEditor Demo 2

This screenshot is using a more robust configuration of the editor

nvQuickEditor Demo 3 

Try It Out Yourself

Check out this HTML example for a simple implementation of this web component. Try changing the theme from "snow" to "bubble" and have a bit of fun!

Using nvQuickComponents

As you can see from the HTML examples, it is quite simple to use these web components. In pure HTML, all you need to do is link to a single JavaScript file and use the Custom Element syntax. For more information on integration with other frameworks, check out the Stencil documentation.

Some additional features and concepts I will be exploring and implementing in the future, as needs arise, are:

  • Additional Decorators (@Watch, @State, @Method, etc.)
  • Custom DOM Events using the @Event decorator
  • Listening for Events via @Listen decorator
  • Form handling
  • Prerendering
  • Server Side Rendering
  • Services Workers
  • Context
  • Unit Testing
  • Routing
  • Framework Integration guidance

Stay tuned and feel free to jump in on the fun. Participation in this project is welcomed!

What are your thoughts on using Web Components in DNN? Let me know in your comments below and/or on GitHub.

Here's to a great DNN future!

nvQuickComponents on GitHub

nvQuickComponents on npm


Clint Patterson
Really neat stuff David! Looking forward to seeing these in use and the component collection as it continues to get built out by you, your team, and the community.
Clint Patterson Tuesday, July 10, 2018 2:19 PM (link)
John Cornelison
So I see Web Components are much simpler than DNN Modules, and more appropriate for 'widgets', pretty small discrete UI components. But the Editor example makes it seem that these might get close to the DNN Module idea. Are they similar and is it useful to compare them? Thanks for forging new territory for DNN - yet again!
John Cornelison Tuesday, February 19, 2019 6:39 PM (link)
David Poindexter
John, yes...Web Components are typically geared towards single components rather than full module solutions. We are already using Web Components in the context of DNN modules.
David Poindexter Monday, February 25, 2019 9:25 AM (link)

Comment Form

Only registered users may post comments.


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Daniels (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (108)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (181)
Daniel Valadas (48)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (80)
Francisco Perez Andres (17)
Geoff Barlow (12)
George Alatrash (12)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (4)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (2)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (40)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Patricio F. Salinas (1)
Patrick Ryan (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott Schlesier (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Steven Fisher (1)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (180)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out