At Drupalcon, one of John Albin’s sessions was a discussion about the possibility of using W3C Web Components as a templating engine. The session was the first time that I had heard about Web Components and it lead me to look into the complexities that Drupal and Web Components offer.
What are web components?
This article by Chris Coyier and Rob Dodson sheds light on what web components are and how they could be used. However, from my point of view and understanding, web components have a very limited use case in Drupal and would provide a world of pain for people that are used to having the world at their fingertips to be overridden.
Are web components possible in Drupal?
My first worry about web components is the fact that they are still HTML, and there is no talk about how to make that dynamic. Drupal would still need to have a way to pipe dynamic content into the web component. For example: If we were to have a slideshow web component for the home page, we would need a means of piping dynamic images, text, etc into that template. This of course is possible using echo, but we want to go above that and provide a means that the theme would be able to handle and change the markup. In my eyes, this is where Twig would come in, if we had a web component called “slideshow” that came default with one module, we might be able to install another module and change our twig-template to use the web component, ex: slick-slider. The small adjustment in the tag would allow for the image slider to use the predefined CSS, js, and HTML that would be needed.
But oh snap, here is where stuff goes awry. If a web component is a self-contained instance of the CSS and HTML, then how do we override the styles? Going back to the example above, if we have the slick slider initiated, and all the styles are inline (using the style tag), then how would we go about switching the arrows to something that will match your comp? Here comes Twig to the rescue! If the Twig template allowed for the styles to be a block, you could extend the twig-template, and override the block of styles and import your own. Possibly.
Twig templates would also allow you to de-uglify the markup that a core web component would most likely provide. This gets into a danger zone because you may not be aware of what markup is critical and which markup is needed. But isn’t that always the case.
Final Thoughts
I am not an expert on web components and there are things I have to learn about them, but I am excited by them and how W3C is embracing the needs of developers and our love for pretty markup. If you have further thoughts and would love to correct my misunderstandings, feel free to leave a comment below.