A rather geeky/technical weblog, est. 2001, by Bramus
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. Example Code: class CustomProgressBar extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'closed'}); …
Continue reading “Web Components: Introducing Custom Elements”
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 content</li></ul>; } }); document.registerReact('my-react-component', MyComponent); You can then use it as follows: <body> <my-react-component items="{window.someArray}"></my-react-component> …
Continue reading “ReactiveElements: Convert React.js components into Web Components”
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 use: <voice-player> for text to speech and <voice-recognition> for speech to text <– text to …
<template id=”sdtemplate”> <style> p { color: orange; } </style> <p>I’m in Shadow DOM. My markup was stamped from a <template>.</p> </template> <script> var proto = Object.create(HTMLElement.prototype, { createdCallback: { value: function() { var t = document.querySelector(‘#sdtemplate’); this.createShadowRoot().appendChild(t.content.cloneNode(true)); } } }); document.register(‘x-foo-from-template’, {prototype: proto}); </script> Custom Elements allow web developers to define new types of HTML …
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 as a full blown map. Speed Up App Development with X-Tag and Web Components →X-Tag …
Continue reading “X-Tag: Web Components’ Custom Elements Polyfill”
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. Spend some time with it. Learn it. Ask questions. I first got introduced to Shadow …