11 ms·
Introducing Custom Elements
- Retr0spectrum 10y agoWhat will this actually be useful for?
- Touche 10y agoThere are examples in this very article.
- achairapart 10y agoA dependency-less, component-based alternative to React. It's part of Web Components: http://webcomponents.org http://webcomponents.org
- untog 10y agoParts of React. For me the state management is a core part of React, and as far as I can tell this doesn't cover that, just the rendering part.
- some1else 10y agoWhat part of React "state management" do you find indispensable?
- some1else 10y agoI don't see the reason for down-votes here guys. It's a legitimate question, isn't it? I was hoping the recipient would understand - once they try to enumerate "the parts" - that it's them managing the state, and that centralized state management and unidirectional data flow are obtainable in Backbone, Custom Elements, or vanilla JavaScript for that matter.
- grzm 10y agoJust speculating, but they have picked up on the Socratic method aspect. Some find that condescending. If that's actually your goal (as indicated by "I was hoping the recipient would understand"), it's not so much a legitimate question that you want to know the answer to, is it? With your explanation, it's more of a rhetorical device. Personally, I didn't read it that way (nor did I down vote you), but given your follow-up, I can see how some might.
- jannotti 10y agoThis seems almost exactly like all of React. These components do have state, just like a React component. If you're talking about how the state is changed, then now you're not talking about React. You're talking about redux, flex, etc. You may very well want something like that here too, but that's not because this isn't like React, it's because it is like React.
- aljones 10y agohttps://github.com/facebook/react/issues/5052#issuecomment-145594782 https://github.com/facebook/react/issues/5052#issuecomment-1...
- tolmasky 10y agoA big part of React (and arguably the whole point of React), is the way in which state changes are handled and re-rendered. A React version of this progress bar element would simply have a render method, that when the state changed would simply be called again for another full-re-render of the element. The fact that this grabs individual elements and mutates them is about as far from React-style programming as you can get. Virtual DOM, tree-diffing, all of this is around a central concept that "immediate mode" programming reduces visual bugs, and is completely absent from custom elements. I'm not saying Custom Element are wrong, but they are absolutely different from React in a core and essential way.
- mambodog 10y agoWhere's the part of React which allows me to return a new copy of what I want the HTML to look like, while only updating the changed elements of my view instead of totally blowing away the existing elements (the virtual DOM + reconcilitation part of React)? Also, where's the declarative event binding part? I'd also point out that the state tree (setState) is a part of React, and plenty of apps are just fine being built using only setState for state management (no redux/flux/mobx).
- Touche 10y agoYou're right, custom elements don't do that, and it's not a goal of the custom elements spec (as far as I can tell) to promote any particular programming style. It's a low level spec. So showing the most low-level way to use it makes sense. Here's a library that combines custom elements with VDOM rendering: https://github.com/skatejs/skatejs https://github.com/skatejs/skatejs
- rpwverheij 10y agoAh yes that's what I was wondering. So Custom Elements are actually part of the Web Components standard, and it looks like it was already implemented in Chrome and Opera, works with a flag under Firefox and so now it has landed in Webkit / Safari, right? Besides Edge, and safari's support for HTML imports, it looks like Web Components implementation is slowly getting there. What about uses? Are there any popular webcomponents out there yet?
- thewhitetulip 10y agoI just watched the talks of Google IO and Polymer Summit, Polymer has a lot of big name users (Coca Cola, net-a-porte have no clue what this is, EA etc)
- drivingmenuts 10y agoThis is a great idea, but how do you get around the fact that it's not valid HTML? Is that even a concern anymore?
- mediumdeviation 10y agoCustom HTML tags are valid HTML. Note the requirements for custom tags to always include a '-' in their names. This distinguishes custom tags from native ones. https://html.spec.whatwg.org/#valid-custom-element-name https://html.spec.whatwg.org/#valid-custom-element-name
- kuschku 10y agoWill the browser be able to display them without requiring JS? If no, then it can't really be argued to be valid HTML by itself.
- ohyoutravel 10y agoYes, the article specifically states this.
- demircancelebi 10y agoThe article says "without relying on a JS framework.", which is different than not requiring JS. It does not work when Javascript is disabled.
- solidr53 10y agothey wont display what the javascript code tells them to display, but rather fallback to a <div /> mode.
- tomatsu 10y ago> Will the browser be able to display them without requiring JS? Without JS (which registers the element), custom element tags will be like any other unknown tag. It's like a span unless the CSS says otherwise. The behavior will be missing, however.
- youdounderstand 10y agoDo custom elements allow re-templating? It's pretty powerful to be able to separate the visual presentation of a control (i.e., markup) from the logic. Every determinate progress bar has 0..1 progress and current progress properties, but the visual representation needs to be able to vary widely in order for these elements to be truly reusable. And it would be nice to be able to change the template (including adding/removing DOM elements to it) without having to define a subclass in JS.
- some1else 10y agoUse composition. Extract the logic out of your custom element into another class (ie.: Progress). That can parent any compatible presentational custom element (i.e.: ProgressText, ProgressBar)
- spankalee 10y agoCustom Elements don't specify how they render at all - they're only about creating instance of specific HTMLElement subclasses during browser operations like parsing, document.creatElement(), cloneNode(), etc., and firing "reactions" like connectedCallback() and attributeChangedCallback(). Once created, Custom Elements can really do anything to the document, there's not built-in concept of templating. Generally though, Custom Elements are going to create a shadow root and render some DOM into it. It's all just code, so an element subclass can use a template library, and can do things like you want, like decouple its template from its implementation. Here's a sketch of an element that would use a template as determined by a 'template' attribute. class MyElement extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}); } render() { this.template.render(this.shadowRoot); } attributeChangedCallback(name, oldValue, newValue) { if (name === 'template') { this.template = templateLib.lookup(newValue); this.render(); } } } And you'd use it like this: <my-element template="progress-bar"><my-element>
- Mackiovello 10y agoWhat's the difference between this and Polymer? It seems to be somewhat similar.
- pomber 10y agoPolymer adds some syntactic sugar over this. This means that polymer will get faster on WebKit because it won't need the polyfill.
- Fifer82 10y agoI have the same question, and where does either fit into the other bits and pieces like Angular and React?
- Mackiovello 10y agoExactly! It would be interesting to hear what the creators had in mind when they built this.
- tdumitrescu 10y agoMaybe it's not obvious from the WebKit article: Custom Elements aren't new, their native implementation in WebKit is what's being announced here. Custom Elements are part of the Web Components collection of cross-browser standards introduced in 2011 (and still not finalized). React was in its infancy at the time, Angular was just getting off the ground. Polymer has always been built on top of the Web Components standard(s). This post isn't about "Yet another new framework competitor!"
- skybrian 10y agoThe hope is that people will be able to make custom tags that work with any UI framework, so you could use them with Angular or React or no framework at all.
- untog 10y agoFor one, this is integrated into the browser. No dependencies required.
- pomber 10y agoGreat news, only thing missing now is HTML imports
- deadA1ias 10y agoHow do we employ progressive enhancement using custom elements? Given their reliance on JavaScript, as an old-school front-end developer, this feels like an unfortunate oversight.
- jannotti 10y agoI don't see how this could possibly work even a little bit without Javascript. What would you fall back to? A static hunk of HTML? That could only work in the very specific case of a custom control that happens to have exactly the same utility on the page as an existing HTML element. And even then, you'd need to add a templating language, so you could express how to render that HTML chunk with a certain value or text. This templating language would not be Javascript, since you're trying to avoid that. So we add a new templating language to HTML for the benefit of rendering content for people who turn off Javascript?
- deadA1ias 10y agoI completely agree, but the question remains what experience do we provide when JavaScript is not available? (Progressive enhancement isn't just for "people who turn off JavaScript", it's an defensive approach to providing inclusive, universal solutions on the web. Something I feel is lacking in the modern, front-end developer's worldview.)
- Periodic 10y agoYou're back to the case of having one static page and then having your javascript enhance things as you go. You'll be stuck replacing elements with your JS. I still think it's a great way to think about how we render on things like mobile. Ever get those slow-loading pages where the elements jump all over the place? Or half-way through reading an article the pop-up add finally renders? We need to build those into the baseline. Fortunately, we can reliably depend on javascript now. What we cannot rely on is internet/processing speed. I've always found progressive enhancement to work best as an additive process. You want to define the functionality of your page and then add enhancements and verify that the base functionality still holds. If you start from the most complex behavior it is a lot harder to reason about how removing functionality might hurt the page.
- tannhaeuser 10y agoWhat's the point in introducing another syntactical feature to HTML (the markup language) when you need Javascript for it anyway? When you're already using Javascript, custom elements don't add any essential functionality. Their inclusion as a feature into HTML feels like a not-so-well thought-out decision from a language design PoV.
- callahad 10y agoThe combination of Custom Elements and Shadow DOM allow you to create a separate, semantic representation of your markup that you can script against, while encapsulating the actual markup required for presentation. E.g., imagine you wanted to select all the images in a carousel. Without Shadow DOM, something like document.querySelectorAll('.carousel img') might pick up images being used as implementation details, like left/right button images, in addition to the carousel images themselves. With Custom Elements and Shadow DOM, your markup could contain only the content you intend to represent, and document.querySelectorAll('.carousel img') would return just the images being shown in the carousel. Of course, like image carousels, whether or not this is a good idea is subjective. But it does give you additional functionality. Hopefully we'll learn how to use it responsibly.
- deleted 10y ago[deleted]
- dfabulich 10y agoWait, what? You just described the benefits of Shadow DOM. Shadow DOM has benefits, but you could get those benefits without Custom Elements, right? What can I do with Custom Elements + Shadow DOM that I can't do with Shadow DOM alone?
- Touche 10y agoDistribute a widget that others can use, or that you can use more easily in other contexts.
- 10y ago
- Too 10y agoWhat happened with separating content and presentation. I thought everybody got over the jquery madness and went on with template based frameworks like react and angular. Who would write code like this in 2016? this._label = shadowRoot.querySelector('.label'); this._label.textContent = newPercentage + '%';
- oregondan 10y agoIt is a bit of an anachronism, yeah. Soon, though, we'll have template literals [1], and this example will just be out of date. [1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
- rictic 10y ago<template> elements are also implemented everywhere but IE: http://caniuse.com/#feat=template http://caniuse.com/#feat=template The advantage of <template> over strings in JS is that the browser can parse the <template> as HTML in parallel with parsing your JS. Less JS to parse means faster cold loads.
- Touche 10y agoCustom elements are not related to templating. I suppose they did it this way because they were highlighting custom elements and not some templating thing.
- greenyouse 10y agoThis looks like it's for the custom elements part of the web components spec. Doing HTML templates is already supported in most browsers [0]. I think they were just trying to show how to create custom HTML tags and left out other parts because it would be outside the scope of the article. webcomponents.org has tons more info about web components. I think it's pretty awesome to get templating, custom elements, scoped styling, and HTML imports as a browser feature without JS frameworks. It'll be neat to have as an option in the future when browser support gets better and people start using it. [0]http://caniuse.com/#feat=template http://caniuse.com/#feat=template
- captn3m0 10y agoWhat is the state of Blink getting upstream webkit changes? How much time would this take to land in Chrome development?
- Touche 10y agoIt's already in Chrome stable. Open your de tools and type `customElements`
- pier25 10y agoBlink doesn't get any upstream changes AFAIK. In fact it's moving much faster than WebKit and got custom elements back in 2014 with version 33. http://caniuse.com/#search=custom%20elements http://caniuse.com/#search=custom%20elements
- ilaksh 10y agoNot in MS Edge because it makes the browser more competitive with MS software frameworks that have had similar features for decades.
- pax_americana 10y agoAll four features of the Web Components Spec (Shadow DOM, Custom Elements, HTML Import and Template Element) are the top most requested features in the MSEdge Developer Uservoice. <template> has already been implemented while the remaining three are on their backlog. https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/filters/top https://wpdev.uservoice.com/forums/257854-microsoft-edge-dev...
- slim 10y agoNew elements? That's what XHTML does since 1999
- om2 10y agoXHTML doesn't give you a way to automatically give behavior and composite structure to a new element. It just gives you a way to put one in your markup without the validator complaining. But it won't do anything by default.
- zengid 10y agoWow, since I went back to school recently I've lost touch with the HTML/JS news, so I've been completely unaware of browsers starting to integrate these features. Will this mean less dependence on React in the near future, or am I missing something?
- nitwit005 10y agoI guess this is more of a shadow dom question, but what's the efficiency of the CSS with this pattern? It seems like styling is being inserted into every instance. Is there a browser feature to avoid internally duplicating it?
- c-smile 10y agoAll this is over-engineered IMO. It is just enough to add support of behavior property to CSS: my-toggler { display:block; behavior: MyToggler url(my-components.js); } As soon as browser will see <my-toggler /> in markup it will call function MyToggler() with 'this' set to the element in file my-components.js. That's what I did in my Sciter[1]. It was proven as quite useful and easily understandable yet implementable in 100 lines or so of native code. The value of shadow DOM is also quite doubtful to be honest. It is shadowed from whom and for what purpose? User don't care about DOM structure ... Programmers? They are OK with that. [1] http://sciter.com http://sciter.com
- om2 10y agoPast attempts at component models for the web have used CSS as the hook instead of a script call. For example, Mozilla's XBL and Microsoft's HTC. This way of doing it is a security hazard because it makes CSS into active code instead of just passive styling. Many sites had problems where they were willing to include CSS from a third-party source for user customization, and ended up with XSS security holes. If you do it carefully and get all the details right, you end up with something like Custom Elements and Shadow DOM, both of which are ultimately not that complicated.
- c-smile 10y ago> to include CSS from a third-party source for user customization, and ended up with XSS security holes. So custom components cannot be included from third party sources? If they can then this is exactly the same problem. And in general idea of including third-party CSS from source you cannot control is even worse. Same thing is about JS. That `behavior` thing can use 'same origin' rule as we have now for any other JS code. The behavior that defines name of a function (in any language) that can setup the element in various ways: e.g. it can be used with React, Angular, Vue, you name it.
- om2 10y ago> So custom components cannot be included from third party sources? If they can then this is exactly the same problem. They can, but you can separately decide whether to support components from arbitrary off-site sources (most sites wouldn't) vs accepting styling for arbitrary off-site sources. > That `behavior` thing can use 'same origin' rule as we have now for any other JS code. There is no same-origin restriction for JS included directly with the <script> tag. Most websites are not designed to expect the <stye> tag to be a backdoor <script> tag. If you mean to invent some novel security restrictions on JS running in the same frame, trust me, it will end up more complex than Custom Elements.
- thewhitetulip 10y agoI am very excited about this! I recently got re-introduced to the Polymer project. What they are doing is definitely the future of front end dev.
- mrdoob2 10y agoSome custom elements I worked on this week: https://mrdoob.github.io/model-tag/ https://mrdoob.github.io/model-tag/
- dsego 10y agoNot supported in Safari, on Chrome (MacOS) I get model-gltf.js:19758 THREE.WebGLRenderer: Error creating WebGL context, and a bunch of other errors.