gistfile1.js

/*  Scenario A:
    The most naive example of what a developer expects.
*/
div.innerHTML = '<foo-bar></foo-bar>';
// <foo-bar>'s readyCallback must be called here.
div.firstChild.methodOnFooBar();

/*  Scenario B:
    HTMLInputElement as Custom Element, Part 1.
*/
form.innerHTML = '<input>';
// <input>'s insertedCalblack must be called here to
// associate <input> with form.
alert(form === form.firstChild.form); // true

/*  Scenario C:
    HTMLInputElement as Custom Element, Part 2.
*/
var input = document.createElement('input');
input.type = 'number';
// <input>'s attributeChangedCallback must be called here.
input.stepUp(); // should not throw

/*  Scenario D:
    Add a Shadow When Inserted.
*/
div.innerHTML = "<foo-bar><baz-qux></baz-qux></foo-bar>";
// <foo-bar>'s insertedCallback:
function fooBarInsertedCallback() {
  var root = this.createShadowRoot();
  root.innerHTML = "<div>Weee!</div>";
  // must not call <baz-qux> insertedCallback yet.
}

/*  Scenario E:
    Destroy the world.
*/
div.innerHTML = "<foo-bar><baz-qux></baz-qux></foo-bar>";
// <foo-bar>'s insertedCallback:
function fooBarInsertedCallback() {
  document.body.innerHTML = '';
  // the <baz-qux> insertedCallback must not be called
  // or must be called in order: first inserted, then removed
}