csuwildcat

/*** Method 1 ***/

<element tagname="x-foo">
  <template id="foo-template-1">
    <shadowroot>
      <div>Baaar me matey!</div>
    </shadowroot>
    <script scoped>
      this.addEventListener('bind', function(e){

csuwildcat

/*** Option 1 ***/

<element tagname="x-foo">
  <script>
    // By default, the tag name is used to generate the
    // named constructor object - without rebinding 'this'
    XFooElement.prototype.bar = ...
  </script>
</element>

csuwildcat

/*** Option 1 - no ES6, all using defaults ***/

<element tagname="x-foo">
  <script>
    // By default, the tag name is used to generate the
    // named constructor object - without rebinding 'this'
    XFooElement.prototype.bar = ...
  </script>
</element>

csuwildcat

/*** Declaritive Definition ***/

<element tagname="x-foo">
  <prototype>
    this.bar = function(){ ... }
    this.registeredCallback = function(){
      document.addEventListener('click', function(event){
        if (event.target.nodeName == 'X-FOO'){
          // Do something when any <x-foo> is clicked

csuwildcat

<style scoped id="g-rating-styles">
  @host {
    * {
      white-space: nowrap;
      -webkit-user-select: none;
      -moz-user-select: none;
    }
  }
  

csuwildcat

<element name="g-ratings" attributes="count value">

  <template>
  
    <style>
      @host {
        * {
          white-space: nowrap;
          -webkit-user-select: none;

csuwildcat

window.addEventListner('HTMLImportsLoaded', function(){

  // raw
  // - requires the creation of an entire emitter system
  // - provides 0 benefit a developer cannot derive by simply adding an event to the specific template
  if (fooTemplate && !fooTemplate.propertChangeAdded) {
  	fooTemplate.propertChangeAdded = true;
        fooTemplate.on('propertychange', function(element,name,value,old){
          
        });

csuwildcat

<x-control name="reply">
  <template>
    <li>
      <label>Reply by: <span class="user"></span></label>
      <p></p>
      <br />
      <span class="date"></span>
	</li>
  </template>

csuwildcat

<x-control name="reply">
  <template>
    <li>
      <label>Reply by: <span class="user"></span></label>
      <p></p>
      <br />
      <span class="date"></span>
	</li>
  </template>

csuwildcat

<x-control name="comment">
  <template>
    <div class="comment">
      <label>User: <span class="user"></span></label>
      <p></p>
      <br />
      <span class="date"></span>
      <button>Update</button>
      <ul></ul>
    </div>