FunctionSource, Your Source for Developer News

I remember hearing Jake Archibald give one of his first talks at an Ajax conference in London. He was hilarious. It was one of the best talks I have heard. He put in all of the right BBC-required disclaimers :)

He is now hacking on Lanyrd with Simon Willison (fun!), and just wrote about the HTML Component Model that Alex Russell and Dmitri Glasgov have been pioneering. He gives us good simple examples on this much needed feature of the platform:

The component model turns the following bits of magic into toys:

• How a particular tag name is linked to a constructor and prototype
• How a single DOM-visible element appears to be made up of multiple parts
• How those parts are protected from some/all styles

The shadow DOM is seriously cool. The regular DOM is clean-shaven, does charity work & goes to bed early on a school night. The shadow DOM has a goatee, sits in a bar and tells you to go fuck yourself if you ask it for an autograph.

The shadow DOM is where you add elements that make up your component.

Alex has a comment on the post that I was very happy to see too:

Hey Jake:
The “x-” prefix will be enforced. Extensions should look like extensions.
Also, in the ModalDialog example, it’s a bit anti-social not to expose your shadow. If this line:

var shadow = new ShadowRoot( this );

Is instead written as:

this.shadow = new ShadowRoot( this );

You make it easier for others to come through and change things around (as in the JS way).

In computer science classes we are being talk to use private. Poor developers that use your APIs shouldn’t get access! They may break something! Don’t let them shoot themselves in the foot!

Abstraction is great. The Shadow DOM gives us that. However, I very much agree that the pieces should be available. You will not be able to understand everything that your users will want to do.

One simple example comes to mind on the iOS side. When you use scroll a UIWebView you don’t always want the nice shadow effect that is given to you out of the box. I love getting all of the goodies out of the box, but I want to keep them in their toy chest too. Although there isn’t a nice API to do this ([webView hideShadow]) at least they didn’t lock it totally off from you. It is indeed hacky, and private, and scary, and it may change, but here ya go:

// Remove the image views that cause shadow on the overscroll
// Based on: http://stackoverflow.com/questions/1074320/remove-uiwebview-shadow
NSArray *subViews = [webView subviews];
if ([subViews count] > 0) {
	for (UIView* aView in [[subViews objectAtIndex:0] subviews]) {
		if ([aView isKindOfClass:[UIImageView class]]) {
			[aView setHidden:YES];
                }
	}
}