Tag Archives: web components

Unicode Patterns with <css-doodle />

<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 … Continue reading

Elsewhere , , , , Leave a comment

Stencil: A Compiler for Web Components

Stencil is a compiler that generates Web Components (more specifically, Custom Elements). Stencil combines the best concepts of the most popular frameworks into a simple build-time tool. Stencil takes features such as Virtual DOM Async rendering (inspired by React Fiber) … Continue reading

Elsewhere , , , Leave a comment

Rendering Markdown using Custom Elements v1

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. … Continue reading

Elsewhere , , , Leave a comment

Introducing Custom Elements

One of the new features in Safari Technology Preview 18 is Custom Elements v1 (Chrome/Opera already support for it): To define a custom element, simply invoke customElements.define with a new local name of the element and a subclass of HTMLElement. … Continue reading

Elsewhere , , , , 1 Comment

ReactiveElements: Convert React.js components into Web Components

Create your component as you normally would, and then register it on the document using document.registerReact(…) /* @jsx React.DOM */ MyComponent = React.createClass({ render: function() { console.log(this.props.items); // passed as HTML tag`s argument console.log(this.props.children); // original tag children return <ul><li>React … Continue reading

Elsewhere , , , , Leave a comment

voice elements

Web Component wrapper to the Web Speech API, that allows you to do voice recognition (speech to text) and speech synthesis (text to speech) using Polymer. Really nifty! Thanks to Polymer you’ll be provided with two extra elements you can … Continue reading

Elsewhere , , , Leave a comment

Custom HTML Elements

<template id=”sdtemplate”> <style> p { color: orange; } </style> <p>I’m in Shadow DOM. My markup was stamped from a &lt;template&gt;.</p> </template> <script> var proto = Object.create(HTMLElement.prototype, { createdCallback: { value: function() { var t = document.querySelector(‘#sdtemplate’); this.createShadowRoot().appendChild(t.content.cloneNode(true)); } } }); … Continue reading

Elsewhere , , , , Leave a comment

Ghost in the Shadow Dom

The DOM will finally have real encapsulation with the introduction of the Shadow DOM, a subset of the Web Components spec that will revolutionise web development as we know it. Great introduction for those not familiar with the subject Related: … Continue reading

Elsewhere , , , Leave a comment

X-Tag: Web Components’ Custom Elements Polyfill

X-Tag is a powerful sugar library primarily focused on wrapping and enhancing one of the draft-state Web Component specs: Custom Elements With Custom Elements, you could for example just write up <x-map data-key="6c86bb5b30a442c180772d978f3ae000"></x-map> in your HTML and have it rendered … Continue reading

Elsewhere , , , Leave a comment

Shadow DOM introduction

Shadow DOM is incredibly powerful. For the first time ever, we have proper encapsulation without the extra baggage of <iframe>s or other older techniques. Shadow DOM is certainly complex beast, but it’s a beast worth adding to the web platform. … Continue reading

Elsewhere , , , 1 Comment