React.js Conf 2015 | @AndrewRota
Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. — Polymer Project
<my-element>Hello World.</my-element>
var MyElement = document.registerElement('my-element', {
prototype: Object.create(HTMLElement.prototype)
});
// Create Shadow Root
var s = document.getElementById('my-element').createShadowRoot();
// Add Styles and Text
s.innerHTML += '<style>p { color: red; }</style>';
<my-custom-element customAttribute="foo"></my-custom-element>
<my-custom-element customAttribute="foo">
<!-- SHADOW DOM -->
<style>p { color: red; }</style>
<div>
<button name="button"><content></content></button>
<p>Lorem Ipsum</p>
</div>
<script>doSomething();</script>
<!-- /SHADOW DOM -->
</my-custom-element>
<input type="text" />
<a href="http://conf.reactjs.com/">Link!</a>
<video src="video.ogg" autoplay controls></video>
<x-calendar view="2015-01-29"></x-calendar>
<chart-pie values="[10, 20, 5, 50]"></chart-pie>
<my-custom-element customAttribute="foo"></my-custom-element>
“I definitely think it's the wrong programming paradigm; I really hope that [web components] do not succeed.”
React.render(
<my-custom-element>Web Components!!</my-custom-element>,
document.getElementById('root')
);
ERROR in ./src/js/init.js
Module build failed:Error: Lower case component
names (my-custom-element) are no longer
supported in JSX: See
http://fb.me/react-jsx-lower-case
“every time there's a new HTML/SVG tag, you can't use it until we add it to the whitelist. You can't add it to the whitelist until you update your existing codebase.”
“To address this, we decided on a convention:
All JSX tags that start with a lower-case letter or contain a dash are treated as HTML.…This also introduces the possibility to consume custom elements (Web Components)”
“The Web is continuously evolving.”
React.render(
<my-custom-element>Web Components!!</my-custom-element>,
document.getElementById('root')
);
React.render(
React.createElement('my-custom-element', null, 'Web Components!!'),
document.getElementById('root')
);
<my-button></my-button>
<my-application></my-application>
<paper-toast text="Hello, world">
getDOMNode().toggle()
<paper-toast onClick={this.handleClick}>
React.createClass({
render: function() {
return (
<paper-toast ref="myCustomElement" text="Hello, World"></paper-toast>
);
},
componentDidMount: function() {
this.refs.myCustomElement.getDOMNode()
.addEventListener('core-overlay-close-completed', doSomething);
},
componentWillUnmount: function() {
this.refs.myCustomElement.getDOMNode()
.removeEventListener('core-overlay-close-completed', doSomething);
}
});
<google-map></google-map>
“Try to keep as many of your components as possible stateless.”