shaunwallace

// Assignment to a non-writable property
var obj1 = {};
Object.defineProperty(obj1, "x", { value: 42, writable: false });
obj1.x = 9; // throws a TypeError

// Assignment to a getter-only property
var obj2 = { get x() { return 17; } };
obj2.x = 5; // throws a TypeError

// Assignment to a new property on a non-extensible object

shaunwallace

// constructor function to create the parent
function Parent( name ){
  this.name = name || 'Bob';
}
// extending the parent
Parent.prototype.sayHi = function() {
  return 'Hi from ' + this.name;
}

// empty child constructor function

shaunwallace

var APP = (function() {

  // private members
  var foo = true;
  var bar = false;
  
  // private method
  function baz() {
    return 1;
  }

shaunwallace

var PublicShape = function() {
  // public members
  this.width = 50;
  this.height = 50;
};

PublicShape.prototype.getWidth = function() {
  // public method with priveledged access to the private members
  return this.width;
}

shaunwallace

var MYAPP = MYAPP || {};

MYAPP.namespace = function (ns_string) {
  
  var parts = ns_string.split('.'), 
  parent = MYAPP, i; 
  
  // strip redundant leading global 
  if( parts[0] === "MYAPP" ) { 
    parts = parts.slice(1); 

shaunwallace

// the scripts inside of the import reference it's containing document
var import = document.currentScript.ownerDocument;

// the main document references itself
var doc = document;

// now we can grab things we need from the imported document and clone them into the main document
// here we are grabbing the styles from the imported document and adding them to the main page
var styles = import.querySelector('link[rel="stylesheet"]');
doc.head.appendChild(styles.cloneNode(true));

shaunwallace

<template id="x-template">
  <style>
    h1 { color: #bada55; }
  </style>
  <h1>What you are reading came from a template and is part of a custom elements shadow DOM</h1>
</template>

var proto = document.create(HTMLElement.prototype, {
  proto.createdCallback : {
    value : function() {

shaunwallace

// example 1

var XElementProto = object.create(HTMLElement.prototype);
// add a method
XElementProto.foo = function() {
  console.log('foo method called');
}
// add a read-only property
Object.defineProperty(XElementProto, "bar", {isCustomElement : true});
// register your custom element

shaunwallace

<section class="info-card">
  John Smith
</section>

<template class="info-car-tmpl">
  <h1>Hello, <content></content>!</h1>
</template>

<script>
  // define our shadow host

shaunwallace

<section class="contact-card">Some default content</section>

<script>
  // in order to create a shadow tree we have to first specify which element will be the shadow host
  // once this has been done then we can add content to the host and the first node added becomes the
  // shadow root and all other nodes will decend from this root.
  var host = document.querySelector('.contact-card');
  var root = host.createShadowRoot();
  
  root.textContent = "Some content that will be inserted inside the shadow root.";