Over at CSS-Tricks, Caleb Williams digs into ElementInternals
The ElementInternals standard is a very exciting set of features with a very unassuming name. Among the features internals adds are the ability to participate in forms and an API around accessibility controls.
As you can see in the demo below his <rad-input> does exactly that.
Nolan Lawson, author of emoji-picker-element, a web component you can use to provide an emoji-picker:
What wasn’t obvious to me, though, was how to allow users to style it. What if they wanted a different background color? What if they wanted the emoji to be bigger? What if they wanted a different font for the input field?
This led me to researching all the different ways that a standalone web component can expose a styling API. In this post, I’ll go over each strategy, as well as its strengths and weaknesses from my perspective.
We couldn’t just choose [a framework] because the different tech stacks were picked by different teams (or even different sub-companies) for different reasons and we would have never succeeded if we would have tried to force everyone to use a specific technology like React.
I’m very curious to see how Stencil wil fare from all this.
Presentation by Pieter Beulque, as given at the most recent FronteersBE meetup, in which he builds a Tweet Embed using Web Components’ Custom Elements.
As a front-end developer, you’re always confronted with making choices. In this talk I cover the benefits you get for free when considering W3C standards or standard browser API’s instead of reaching for the latest framework or library.
Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224X faster.
Installation per NPM:
npm install lite-youtube-embed
<!-- Include the stylesheet, this could be direct from the package or bundled -->
<link rel="stylesheet" href="node_modules/lite-youtube-embed/src/lite-yt-embed.css" />
<!-- Include the custom element script -->
<!-- Use the element. You may define uses before the scripts are parsed and executed. -->
<css-doodle /> is a web component for drawing patterns with CSS.
The component will generate a grid of divs by the rules (plain CSS) inside it. You can easily manipulate those cells using CSS to come up with a graphic pattern or an animated graph. The limit is the limit of CSS itself.
Combine <css-doodle /> with generated content and Unicode characters, and you can create nice decorative patterns as shown above.
Inspired upon a v0 implementation, I’ve recreated a Markdown renderer in Custom Elements v1. The result is <custom-markdown>.
The code itself is pretty straightforward: other than some (contained) styling the custom element uses showdown to convert the Markdown to HTML. This conversion is triggered in the connectedCallback().