In this experiment I am not using web components. I am just inventing new tags and using them both in CSS and JavaScript. In a sense my 'chuck-div' is like a div with a class. This approach appeals to me because when you look at the source in a browser it is "more semantic" and I can insure closing tags match opening tags when I develop. I really don't like seeing 5 '</div>' tags to close all of the different div tags we opened to effect nesting.
I kind of see this as a starting point where I use markup that looks like web components but only use web components where I need something beyond what I can do in stock JS and CSS. It lets me develop markup and evolve to web components. It lets me avoid making a web component for everything right away.
Surprisingly, it kind of works but I worry that this will break on different browsers. I also worry that these custom tags will mess up screen readers. View source to and console to see what is up. you can click on the text in the chuck-tag as well.
Chuck tag 1
This is all in github at https://github.com/csev/wc-experiment feel free to open an issue to talk about what I am trying to do.