7 ms·
X-Tag - a cross-browser web components library
- dandonkulous 14y agoX-Tag was just added as an official Mozilla repo on Github - it's a small, JS-only polyfill that enables the Custom Element portion of the W3 Web Components spec (https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/...) and other convenient mechanisms to generate awesome components. X-Tag has broad support coverage for a huge percentage of browsers in active used today on both mobile and desktop - Firefox 5+ desktop/mobile, Chrome 4+ desktop/mobile, Safari 4+ desktop/mobile, IE10 desktop, Opera 12 desktop, and all Android 2.0+ stock browsers.
- sixbrx 14y agoReally neat. I must be living under a rock, but I never had heard of this before. It seems to bring a lot of the advantages of component-oriented development with it - just declare and go and the implementers will have taken care of the necessary wiring behind the scenes to make the components work. What I don't have a feel for though is what disadvantages it might bring from component oriented development - how easy for example would it be to change the style and/or behavior of the expanded component dom objects, in a way that the original developers never thought of, if need be? In any case, very cool and thanks for posting.
- dandonkulous 14y agoTo change the style and behavior, you just use the DOM as you normally would. You can access the inner DOM elements of a component with regular ol' JS and style them normally with CSS if exposed - but even if they were created as Shadow DOM elements (in browsers that support Shadow DOM), you can still style them with CSS ;)
- sriramramani 14y agoThis is really amazing. After being used to custom XML tags in Android, I so wanted to build custom HTML tags for web apps. This is exactly what I wanted!
- dandonkulous 14y agoYou should be able to use this as a standard soon, X-Tag has helped inform the W3 spec. I've been working with Dimitri Glazkov (the W3 draft author) over the last 2 months. We reached initial agreement as a group that the standard, imperative JS DOM API should be "document.register" in the style of X-Tag's "xtag.register" (specs can change though, of course).
- pfraze 14y agoThis looks extremely promising. Thanks for the great work.
- MatthewPhillips 14y agoWhy won't the poly fill work in IE9
- dandonkulous 14y agoBecause it doesn't support CSS Animations, which I use for insertion detection. I might be able to finagle it for IE9 with Mutation events, but in their DOM Level 3 state, they destroy performance. IE10 supports CSS Animations and will also be the first IE version to support HTML5 Windows apps, those are the two most significant reasons it is the current minimum version for IE. If IE9 is the thing people really need, I can try to work it in, we'll see what folks say ;)
- MatthewPhillips 14y agoThis really makes me sad. Mutation events gets you to IE9 but not 8, which means this cannot be used for enterprise apps. I'll start using it in personal projects though. Love the work.
- dandonkulous 14y agoYeah the funny thing is I could actually even make it work in IE6 and 7 if I used Mutation for IE9 and then - ready your pitchforks and torches folks - proprietary CSS Behavior script ducks to avoid tomato. IE8 screwed the pooch in this regard - they removed CSS Behaviors but failed to implement anything that could be used to do the same sort of thing.
- ars 14y agoDo it, because without IE7 or at least IE8 support this will barely get used.
- dandonkulous 14y agoI'm going to work on it this weekend!
- jacobr 14y agoIsn't there a risk of conflict with elements introduced in future versions of HTML?
- TobiasFunkeMD 14y agoIt looks like you have to prefix the tag names you register with an x- in your html.
- dandonkulous 14y agoThe prefix is added as a default, but can be changed or even removed - it's up to you, the developer.
- dandonkulous 14y agoNew tags are given an "x-" prefix by default, so that's not an issue. That said, you can opt out of the prefixing by changing the namespace string - but even if you remove it and there is a tag created down the road of that name, it doesn't mean your stuff is sure to break.
- dandonkulous 14y agoIf I can get it compatible with IE9, is that a big thing for people here? I don't think it would be too hard, thoughts?
- legutierr 14y agoI, for one, would never use this while it remains incompatible with a large segment of the web-browsing public. So, yes, I think it would be a big deal. IE8 would be even better. But with IE9 compatibility, at least it would be feasible to start using this when IE8 fades away.
- MatthewPhillips 14y agoI'm not sure IE9 is such a huge win. This already supports IE10, and every Windows 7 computer will be auto-updated to IE10 (if Microsoft holds to it's decision to automatically update from now on). XP users will never get IE9 or IE10, and IE8 can't be supported unfortunately. So I guess Chrome Frame will be necessary to target IE8 users.
- dandonkulous 14y agoIE9 support lands today, and we've decided against supporting earlier versions of IE - too much headache and code bloat/hackishness to justify addressing the ever shrinking < IE9 user base.
- jblz 14y agoIdeally, IE8 should be your minimum. There's a large contingent of web users still on Windows XP and IE9+ is not available for it. XP is in extended support until 2014-08-14 & yes, I'm counting down the days.
- deleted 14y ago[deleted]
- Navarr 14y agoThe steps seem pretty dishonest to me. Correct me if i'm wrong, but these are the real X-Tag steps: 1. Scour the web for a plugin 2. Add the plugin script include to your page 3. Copy/Type the new HTML tag 4. Customise the plugin with your own behavior 5. Wash, Rinse, & Repeat
- dandonkulous 14y ago1) Mozilla is generating a stock set of components that you wont have to "scour" for. 2) The components can be easily included using an app bootstrap builder that the Mozilla Marketplace dev hub will feature 3) You write the tags like you would any other in HTML, there is not complex copy or paste operation... 4) You can use components without modifying them, #4 is a red herring Another huge benefit: the polyfill is 2k compressed composed of pure, library-independent JS
- MatthewPhillips 14y agoMaybe I'm misunderstanding, doesn't this mean I can use x-foo without including its js if x-foo is in the marketplace? That would be amazing.
- kumar303 14y agoThe Marketplace is just the "app store" -- it's where you buy apps. You can run the apps on any supported HTML5 device after buying them. So the supported device would not provide anything more than a browser rendering engine (and some navigator.* JS methods). It won't include x-tags.
- MatthewPhillips 14y agoI'm aware, I submitted an app already :-). I'm confused about what he meant about the marketplace having a "bootstrap builder" for x-tags.
- jlongster 14y ago
- patrickaljord 14y agoA link to the github repo would be nice.
- dandonkulous 14y agoSurely sir! http://github.com/mozilla/x-tag/ http://github.com/mozilla/x-tag/
- patrickaljord 14y agoI meant a link on the page itself but thanks :)
- walrus 14y agoDoesn't work on the Arch Linux build of Firefox. Tested both in safe mode and in a new profile. However, the Mozilla build works fine.
- khuey 14y agoCan you file a bug (at bugzilla.mozilla.org) and CC me (":khuey")? I'd like to figure out what Arch is doing here.
- deleted 14y ago[deleted]
- deleted 14y ago[deleted]
- neuroscr 14y agoI think an oppertunity is lost here beig too js oriented. Instead of a data container (maybe json) that any serverside language could compile and prerender (thinking php). You could embed the required css/js and other possible resources in the container too.
- neuroscr 14y agoI think an oppertunity is lost here beig too js oriented. Instead of a data container (maybe json) that any serverside language could compile and prerender (thinking php). You could embed the required css/js and other possible resources in the container too.
- hcarvalhoalves 14y agoOk, so is this like -vendor, but for HTML? Now browsers can implement their own components and, hopefully, push it as a standard?
- fwenzel 14y agoBrowsers were always able to implement their own tags. x-tag allows the developer of a website to write their own tags (and share them with others, etc.), which is huge.
- gliese1337 14y agoSo, how does this impact Web Components? It seems to fill pretty much the exact same role, but with a rather different implementation. Should I expect to see this become the new standard because there's a polyfill for it so people will start using it already, or am I gonna end up with a bunch of legacy code when something else becomes standardized? And, again like Web Components, it's duplicating functionality that's been in Internet Explorer of all places since IE5.0 with DHTML Behaviors.
- rmc 14y agoI'm not sure, but I think this is 'Web Components'. The Mozilla page says so https://wiki.mozilla.org/Apps/x-tag https://wiki.mozilla.org/Apps/x-tag
- dandonkulous 14y agoActually I have been meeting with the W3 Web Components spec author for about 2 months while we readied this. The document.register method that was recently added to the spec was in large part a byproduct of X-Tag and when browsers implement it (Firefox soon) X-Tag will use it internally in browsers that support it, as a polyfill always does. Once one browser implements the JS mentod, X-Tag will truly polyfill the method on document as well.
- edwinyzh 14y agoThis sounds great! Can anybody compare it with angularjs (by Google)?