jQuery UI widget as a Web Component

HTML

<div id="test"></div>

JavaScript

// A trivial jQuery UI widget.
$.widget( "sample.greet", {
    _create: function() {
        this.element.html( "Hello, world." );
    }
});

// Turn the widget into a Web Component by rendering its
// contents in the Shadow DOM. This will completely encapsulate
// the widget's contents, making them invisible to the host,
// and thereby protecting them from modification.
window.WidgetComponent = function( host ) {
    var root = host.webkitCreateShadowRoot();
    element = document.createElement( "div" );
    root.appendChild( element );
    // Instantiate a widget on a contained element.
    $( element ).greet();
    // But we can't (yet) instantiate the widget -- or any other
    // jQuery plugin that invokes html() -- on the root.
    // $( root ).greet();
};

// Create an instance of our componentized jQuery UI widget.
var test = $( "#test" )[0];
WidgetComponent( test );