web components playground

angular-web-component.js

angular.module('web.components', []).factory('webComponent', function ($templateCache, $compile) {

  function getAttributes (element) {
    var $attrs = {}, attrs = element.attributes;
    for( var i = 0, len = attrs.length; i < len ; i++ ) {
      $attrs[attrs[i].name.replace(/([a-z])-([a-z])/, function (match, a, z) {
        return a + z.toUpperCase();
      })] = attrs[i].value;
    }
    return $attrs;
  }

  return {
    register: function (tag, options) {
      var elementProto = Object.create(HTMLElement.prototype);

      elementProto.createdCallback = function () {
        var $element = angular.element(this.createShadowRoot()),
            $scope = $element.scope(options.scope);

        $element.append( $compile( options.template || $templateCache.get(options.templateUrl) )($scope) );

        options.controller( $scope, $element, getAttributes(this) );
        // init.call(this.createShadowRoot());
      };

      document.registerElement(tag, { prototype: elementProto });
    }
  };

});

angular.module('web.component.switch2', []).run(function (webComponent) {
  webComponent.register('web-test', {
    templateUrl: 'ng.web/directives/web-test.html',
    controller: function (scope, element, attrs) {
      console.log('web-test', scope, element, attrs );
    }
  });
});

webcomponents.js

// (function () {
//   var SpecialInputProto = Object.create(HTMLElement.prototype);
//
//   SpecialInputProto.createdCallback = function () {
//
//     // getting initial value of value attribute
//     var value = this.hasAttribute('value') ?
//                 this.getAttribute('value') : '';
//
//     // var template = document.querySelector('template').content;
//
//     // setting value property of input element
//     // template.querySelector('input').value = value;
//
//     var shadowRoot = this.createShadowRoot();
//     shadowRoot.innerHTML = '<input type="password">';
//     // shadowRoot.appendChild(template.cloneNode(true));
//   };
//
//   document.registerElement('input-password', {
//     prototype: SpecialInputProto
//   });
// })();

// function createShadowElement (tag, init) {
//   var elementProto = Object.create(HTMLElement.prototype);
//   elementProto.createdCallback = function () {
//     init.call(this.createShadowRoot());
//   };
//   document.registerElement(tag, { prototype: elementProto });
// }

// createShadowElement('apz-select', function () {
//   this.innerHTML = $templateCache.get('ng.apz/directives/apz-select.html');
// });

// @TODO: review https://pascalprecht.github.io/2014/10/25/integrating-web-components-with-angularjs/

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/?redirect_from_locale=es