Introducing SLAB

SLAB is a Standards Layer for APIs in Browsers. It's a Javascript library that provides a standards-based scripting environment for most recent browsers.


Some of the features that SLAB provides (if not already supported by the browser):

SLAB is similar in scope to Dean Edwards' base2 project.


Incorporating SLAB in your web-page would usually look something like this:

  <!-- SLAB should be included before other scripts -->
  <script src=""></script>
 * ECMAScript Array, Object and Function enhancements are available
 * DOM Prototypes are available
 * Custom DOM methods should be implemented before initializing DOM system
HTMLFormElement.prototype.encode = function() {
 var txt = "";
 Array.forEach(this.elements, function(el) {
  if ( txt += + ":" + encodeURIComponent(el.value) + "&amp;";
 return txt;

 * Initialize the DOM system

 * Standard DOM interfaces now available on window and document,
 * and are automatically available on elements
var onSubmit = function(event) {
 var form =;
 var rc = confirm("Submit this data now?\n" + form.encode());
 if (!rc) event.preventDefault();

document.addEventListener("submit", onSubmit, false);
  <form action="" method="GET">
   <label>First name <input type="text" name="firstName" /></label><br />
   <label>Last name <input type="text" name="lastName" /></label><br />
   <input type="submit" />

This sample code adds an encode() method to all form elements using the HTMLFormElement.prototype interface, and monitors all submit events using document.addEventListener(). This is unremarkable on Firefox, Safari, Chrome and Opera, but with SLAB it also works on Internet Explorer, even IE6 which has none of DOM prototypes, addEventListener() or bubbling submit events.

Here is a demo of that page in your browser. If you submit the form it should popup a confirmation dialog.

As indicated in the comments for the sample code, there is an order for initializing SLAB:

  1. include the SLAB script
  2. implement additions to DOM prototypes - HTMLElement, etc
  3. initialize the DOM system - Meeko.stuff.domSystem.initialize()
  4. the standard scripting environment is now ready


Just-in-time element fixes

SLAB doesn't fix element methods and properties when the document is loaded, rather it ensures that any element is fixed before any code references it. This is achieved by intercepting methods and properties that return element references. SLAB supports all element accessors except:

Some accessors, such as document|element.querySelectorAll() and element.children, return NodeList or HTMLCollection objects. Elements in these collections must be accessed with the item() method. e.g. element.children.item(index). SLAB does NOT support the commonly used array-notation and, where possible, prevents access using array notation (so that element.children[index], for example, would return undefined). This is by design, the intention being to make code fail nosily when the unsupported notation is used.

Generic Array methods filter, forEach, every, some are provided that can accept modified element collections.

No inline event handlers

SLAB does NOT support inline event handlers, e.g. element.onclick = function() { ... }.

Other stuff

Project page

SLAB has its own project page with more documentation. I'm using Assembla for bug-reporting and feature-requests - registration is fairly straight-forward if you want to give feedback there.


SLAB is currently hosted on the Amazon CloudFront CDN.

You can follow default release with or a branch (only 0.7 for now) with You can also link to individual snapshots. More details on the project page.


At this stage SLAB is available under the Creative-Commons Attribution, No-Derivatives license. You can include it with a script element sourcing the original file (see the sample code above), or you can copy it to your server and source it from there.