skatejs-named-slots - npm Package Compare versions

Comparing version 0.0.1 to 0.0.3

dist/index.js

@@ -1,32 +0,142 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-  typeof define === 'function' && define.amd ? define(factory) :
-  (global.skatejs-named-slots = factory());
-}(this, function () {
-
-  var mapPatch = new WeakMap();
-
-  var mapSlots = new WeakMap();
-
-  var mapSlotsDefault = new WeakMap();
-
+// src/internal/map/patch.js
+(typeof window === 'undefined' ? global : window).__e0f3ff9d2482bb4d7d1a054acdbf91f0 = (function () {
+  var module = {
+    exports: {}
+  };
+  var exports = module.exports;
+  
+  "use strict";
+  
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports["default"] = new WeakMap();
+  module.exports = exports["default"];
+  
+  return module.exports;
+}).call(this);
+// src/internal/map/slots.js
+(typeof window === 'undefined' ? global : window).__c5ff1991634757682d350a3d5a6d7487 = (function () {
+  var module = {
+    exports: {}
+  };
+  var exports = module.exports;
+  
+  "use strict";
+  
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports["default"] = new WeakMap();
+  module.exports = exports["default"];
+  
+  return module.exports;
+}).call(this);
+// src/internal/map/slots-default.js
+(typeof window === 'undefined' ? global : window).__d7d815c237595e6d764cb57744dca5a3 = (function () {
+  var module = {
+    exports: {}
+  };
+  var exports = module.exports;
+  
+  "use strict";
+  
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports["default"] = new WeakMap();
+  module.exports = exports["default"];
+  
+  return module.exports;
+}).call(this);
+// src/polyfilled.js
+(typeof window === 'undefined' ? global : window).__f7b10bf00c7af5bbec02f710b3134a30 = (function () {
+  var module = {
+    exports: {}
+  };
+  var exports = module.exports;
+  
+  'use strict';
+  
+  Object.defineProperty(exports, '__esModule', {
+    value: true
+  });
+  
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+  
+  var _internalMapPatch = __e0f3ff9d2482bb4d7d1a054acdbf91f0;
+  
+  var _internalMapPatch2 = _interopRequireDefault(_internalMapPatch);
+  
   // Returns whether or not the specified element has been polyfilled.
-  function polyfilled (elem) {
-    return mapPatch.get(elem);
-  }
-
+  
+  exports['default'] = function (elem) {
+    return _internalMapPatch2['default'].get(elem);
+  };
+  
+  module.exports = exports['default'];
+  
+  return module.exports;
+}).call(this);
+// src/polyfill.js
+(typeof window === 'undefined' ? global : window).__c3b6c16d5a5beb9a0502d6861c6a5157 = (function () {
+  var module = {
+    exports: {}
+  };
+  var exports = module.exports;
+  
+  'use strict';
+  
+  Object.defineProperty(exports, '__esModule', {
+    value: true
+  });
+  
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+  
+  var _internalMapPatch = __e0f3ff9d2482bb4d7d1a054acdbf91f0;
+  
+  var _internalMapPatch2 = _interopRequireDefault(_internalMapPatch);
+  
+  var _internalMapSlots = __c5ff1991634757682d350a3d5a6d7487;
+  
+  var _internalMapSlots2 = _interopRequireDefault(_internalMapSlots);
+  
+  var _internalMapSlotsDefault = __d7d815c237595e6d764cb57744dca5a3;
+  
+  var _internalMapSlotsDefault2 = _interopRequireDefault(_internalMapSlotsDefault);
+  
+  var _polyfilled = __f7b10bf00c7af5bbec02f710b3134a30;
+  
+  var _polyfilled2 = _interopRequireDefault(_polyfilled);
+  
   var prop = Object.defineProperty.bind(Object);
-
+  
   // Helpers.
-
+  
+  function getSlot(elem, node) {
+    var key = getSlotName(elem, node);
+    var val = elem[key];
+    return key && val ? { key: key, val: val.slice() } : null;
+  }
+  
   function getSlotName(elem, node) {
-    return node.getAttribute && node.getAttribute('slot') || mapSlotsDefault.get(elem);
+    return node.getAttribute && node.getAttribute('slot') || _internalMapSlotsDefault2['default'].get(elem);
   }
-
+  
+  // TODO use in DOM manip methods to make them DocumentFragment compatible.
   function nodeToArray(node) {
     return node instanceof DocumentFragment ? [].slice.call(node.childNodes) : [node];
   }
-
+  
+  function arrayItem(idx) {
+    return this[idx];
+  }
+  
+  function makeLikeNodeList(arr) {
+    arr.item = arrayItem;
+    return arr;
+  }
+  
   // Prop overrides.
-
+  
   var props = {
@@ -41,6 +151,6 @@ childElementCount: {
         var _this = this;
-
-        return (mapSlots.get(this) || []).reduce(function (prev, curr) {
+  
+        return makeLikeNodeList((_internalMapSlots2['default'].get(this) || []).reduce(function (prev, curr) {
           return prev.concat(_this[curr]);
-        }, []);
+        }, []));
       }
@@ -50,5 +160,5 @@ },
       get: function get() {
-        return this.childNodes.filter(function (node) {
+        return makeLikeNodeList(this.childNodes.filter(function (node) {
           return node.nodeType === 1;
-        });
+        }));
       }
@@ -96,4 +206,4 @@ },
         var attributes = [].slice.call(this.attributes).map(function (attr) {
-          return ' ' + attr.name + (attr.value ? '=' + attr.value : '');
-        });
+          return ' ' + attr.name + (attr.value ? '="' + attr.value + '"' : '');
+        }).join('');
         return '<' + name + attributes + '>' + this.innerHTML + '</' + name + '>';
@@ -109,3 +219,3 @@ }
       set: function set(val) {
-        var slot = mapSlotsDefault.get(this);
+        var slot = _internalMapSlotsDefault2['default'].get(this);
         if (slot) {
@@ -117,10 +227,20 @@ this[slot] = document.createTextNode(val);
   };
-
+  
+  function doForNodesIfSlot(elem, node, func) {
+    nodeToArray(node).forEach(function (node) {
+      var slot = getSlot(elem, node);
+      if (slot) {
+        func(elem, node, slot);
+      }
+    });
+  }
+  
   // Method overrides.
-
+  
   var funcs = {
     appendChild: function appendChild(newNode) {
-      var name = getSlotName(this, newNode);
-      if (!name && !this[name]) return;
-      this[name] = this[name].concat(nodeToArray(newNode));
+      doForNodesIfSlot(this, newNode, function (elem, node, slot) {
+        slot.val.push(node);
+        elem[slot.key] = slot.val;
+      });
       return newNode;
@@ -132,65 +252,133 @@ },
     insertBefore: function insertBefore(newNode, refNode) {
-      var name = getSlotName(this, newNode);
-      if (!name || !this[name]) return;
-      var index = this[name].indexOf(refNode);
-      this[name] = this[name].slice(0, index).concat(nodeToArray(newNode)).concat(this[name].slice(index));
+      doForNodesIfSlot(this, newNode, function (elem, node, slot) {
+        var index = slot.val.indexOf(refNode);
+        if (index === -1) {
+          slot.val.push(node);
+        } else {
+          slot.val.splice(index, 0, node);
+        }
+        elem[slot.key] = slot.val;
+      });
       return newNode;
     },
     removeChild: function removeChild(refNode) {
-      var name = getSlotName(this, refNode);
-      if (!name && !this[name]) return;
-      var index = this[name].indexOf(refNode);
-      this[name] = this[name].slice(0, index).concat(this[name].slice(index + 1));
+      doForNodesIfSlot(this, refNode, function (elem, node, slot) {
+        var index = slot.val.indexOf(node);
+        if (index !== -1) {
+          slot.val.splice(index, 1);
+          elem[slot.key] = slot.val;
+        }
+      });
       return refNode;
     },
     replaceChild: function replaceChild(newNode, refNode) {
-      var name = getSlotName(this, newNode);
-      if (!name || !this[name]) return;
-      var index = this[name].indexOf(refNode);
-      this[name] = this[name].slice(0, index).concat(nodeToArray(newNode)).concat(this[name].slice(index + 1));
+      doForNodesIfSlot(this, refNode, function (elem, node, slot) {
+        var index = slot.val.indexOf(refNode);
+        if (index !== -1) {
+          slot.val.splice(index, 1, newNode);
+          elem[slot.key] = slot.val;
+        }
+      });
       return refNode;
     }
   };
-
+  
   // Polyfills an element.
-  function polyfill (elem) {
-    if (polyfilled(elem)) {
+  
+  exports['default'] = function (elem) {
+    if ((0, _polyfilled2['default'])(elem)) {
       return;
     }
-
-    for (var name in props) {
-      prop(elem, name, props[name]);
+  
+    for (var _name in props) {
+      prop(elem, _name, props[_name]);
     }
-
-    for (var name in funcs) {
-      elem[name] = funcs[name];
+  
+    for (var _name2 in funcs) {
+      elem[_name2] = funcs[_name2];
     }
-
-    mapPatch.set(elem, true);
-  }
-
+  
+    _internalMapPatch2['default'].set(elem, true);
+  };
+  
+  module.exports = exports['default'];
+  
+  return module.exports;
+}).call(this);
+// src/render.js
+(typeof window === 'undefined' ? global : window).__4b1fb0087d27bc1c8cc501d2e3060c30 = (function () {
+  var module = {
+    exports: {}
+  };
+  var exports = module.exports;
+  
+  'use strict';
+  
+  Object.defineProperty(exports, '__esModule', {
+    value: true
+  });
+  
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+  
+  var _polyfill = __c3b6c16d5a5beb9a0502d6861c6a5157;
+  
+  var _polyfill2 = _interopRequireDefault(_polyfill);
+  
+  var _internalMapPatch = __e0f3ff9d2482bb4d7d1a054acdbf91f0;
+  
+  var _internalMapPatch2 = _interopRequireDefault(_internalMapPatch);
+  
   // Simple renderer that proxies another renderer. It will polyfill if not yet
   // polyfilled, or simply run the renderer. Initial content is taken into
   // consideration.
-  function render (fn) {
+  
+  exports['default'] = function (fn) {
     return function (elem) {
-      if (mapPatch.get(elem)) {
+      if (_internalMapPatch2['default'].get(elem)) {
         fn(elem);
       } else {
         fn(elem);
-        polyfill(elem);
+        (0, _polyfill2['default'])(elem);
       }
     };
-  }
-
+  };
+  
+  module.exports = exports['default'];
+  
+  return module.exports;
+}).call(this);
+// src/slot.js
+(typeof window === 'undefined' ? global : window).__36ff6696f2c15c86c505cd37caa87aac = (function () {
+  var module = {
+    exports: {}
+  };
+  var exports = module.exports;
+  
+  'use strict';
+  
+  Object.defineProperty(exports, '__esModule', {
+    value: true
+  });
+  
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+  
+  var _internalMapSlots = __c5ff1991634757682d350a3d5a6d7487;
+  
+  var _internalMapSlots2 = _interopRequireDefault(_internalMapSlots);
+  
+  var _internalMapSlotsDefault = __d7d815c237595e6d764cb57744dca5a3;
+  
+  var _internalMapSlotsDefault2 = _interopRequireDefault(_internalMapSlotsDefault);
+  
   // Creates a slot property compatible with the SkateJS custom property
   // definitions. Makes web component integration much simpler.
-  function slot (opts) {
+  
+  exports['default'] = function (opts) {
     if (!opts) {
       opts = {
-        default: false,
+        'default': false,
         set: null
       };
     }
-
+  
     return {
@@ -201,18 +389,18 @@ // Makes sure that whatever is passed in is an array.
       },
-
+  
       // Registers the slot so we can check later.
       created: function created(elem, data) {
-        var slots = mapSlots.get(elem);
-
+        var slots = _internalMapSlots2['default'].get(elem);
+  
         if (!slots) {
-          mapSlots.set(elem, slots = []);
+          _internalMapSlots2['default'].set(elem, slots = []);
         }
-
+  
         slots.push(data.name);
-
-        if (opts.default) {
-          mapSlotsDefault.set(elem, data.name);
+  
+        if (opts['default']) {
+          _internalMapSlotsDefault2['default'].set(elem, data.name);
         }
       },
-
+  
       // If an empty value is passed in, ensure that it's an array.
@@ -222,3 +410,3 @@ 'default': function _default() {
       },
-
+  
       // Return any initial nodes that match the slot.
@@ -228,33 +416,106 @@ initial: function initial(elem, data) {
           if (ch.getAttribute) {
-            var slot = ch.getAttribute('slot') || opts.default && data.name;
+            var slot = ch.getAttribute('slot') || opts['default'] && data.name;
             return slot === data.name;
+          } else if (ch.nodeType === 3) {
+            return true;
           }
         });
       },
-
+  
       // User-defined setter.
       set: opts.set
     };
-  }
-
-  var version = '0.0.1';
-
-  var main = {
-    polyfill: polyfill,
-    polyfilled: polyfilled,
-    render: render,
-    slot: slot,
-    version: version
   };
-
-  var previousGlobal = window.skatejsNamedSlots;
-  main.noConflict = function noConflict() {
-    window.skatejsNamedSlots = previousGlobal;
-    return this;
+  
+  module.exports = exports['default'];
+  
+  return module.exports;
+}).call(this);
+// src/version.js
+(typeof window === 'undefined' ? global : window).__f3b5bbf7c2869a091610ee437003226b = (function () {
+  var module = {
+    exports: {}
   };
-  window.skatejsNamedSlots = main;
-
-  return main;
-
-}));
-//# sourceMappingURL=index.js.map
+  var exports = module.exports;
+  
+  'use strict';
+  
+  Object.defineProperty(exports, '__esModule', {
+    value: true
+  });
+  exports['default'] = '0.0.1';
+  module.exports = exports['default'];
+  
+  return module.exports;
+}).call(this);
+// src/index.js
+(typeof window === 'undefined' ? global : window).__c62e2a3f85bb48383fbab4fda1d3137c = (function () {
+  var module = {
+    exports: {}
+  };
+  var exports = module.exports;
+  
+  'use strict';
+  
+  Object.defineProperty(exports, '__esModule', {
+    value: true
+  });
+  
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+  
+  var _polyfill = __c3b6c16d5a5beb9a0502d6861c6a5157;
+  
+  var _polyfill2 = _interopRequireDefault(_polyfill);
+  
+  var _polyfilled = __f7b10bf00c7af5bbec02f710b3134a30;
+  
+  var _polyfilled2 = _interopRequireDefault(_polyfilled);
+  
+  var _render = __4b1fb0087d27bc1c8cc501d2e3060c30;
+  
+  var _render2 = _interopRequireDefault(_render);
+  
+  var _slot = __36ff6696f2c15c86c505cd37caa87aac;
+  
+  var _slot2 = _interopRequireDefault(_slot);
+  
+  var _version = __f3b5bbf7c2869a091610ee437003226b;
+  
+  var _version2 = _interopRequireDefault(_version);
+  
+  exports['default'] = {
+    polyfill: _polyfill2['default'],
+    polyfilled: _polyfilled2['default'],
+    render: _render2['default'],
+    slot: _slot2['default'],
+    version: _version2['default']
+  };
+  module.exports = exports['default'];
+  
+  return module.exports;
+}).call(this);
+// src/global.js
+(typeof window === 'undefined' ? global : window).__911af63b703cd92dd8341dd8c6151193 = (function () {
+  var module = {
+    exports: {}
+  };
+  var exports = module.exports;
+  
+  'use strict';
+  
+  Object.defineProperty(exports, '__esModule', {
+    value: true
+  });
+  
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+  
+  var _index = __c62e2a3f85bb48383fbab4fda1d3137c;
+  
+  var _index2 = _interopRequireDefault(_index);
+  
+  window.skateNamedSlots = _index2['default'];
+  exports['default'] = _index2['default'];
+  module.exports = exports['default'];
+  
+  return module.exports;
+}).call(this);

dist/index.min.js

@@ -1,2 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.skatejs-named-slots=e()}(this,function(){function t(t){return s.get(t)}function e(t,e){return e.getAttribute&&e.getAttribute("slot")||u.get(t)}function n(t){return t instanceof DocumentFragment?[].slice.call(t.childNodes):[t]}function i(e){if(!t(e)){for(var n in a)l(e,n,a[n]);for(var n in h)e[n]=h[n];s.set(e,!0)}}function r(t){return function(e){s.get(e)?t(e):(t(e),i(e))}}function o(t){return t||(t={"default":!1,set:null}),{coerce:function(t){return Array.isArray(t)?t:[t]},created:function(e,n){var i=c.get(e);i||c.set(e,i=[]),i.push(n.name),t["default"]&&u.set(e,n.name)},"default":function(){return[]},initial:function(e,n){return[].slice.call(e.childNodes).filter(function(e){if(e.getAttribute){var i=e.getAttribute("slot")||t["default"]&&n.name;return i===n.name}})},set:t.set}}var s=new WeakMap,c=new WeakMap,u=new WeakMap,l=Object.defineProperty.bind(Object),a={childElementCount:{get:function(){return this.children.length}},childNodes:{get:function(){var t=this;return(c.get(this)||[]).reduce(function(e,n){return e.concat(t[n])},[])}},children:{get:function(){return this.childNodes.filter(function(t){return 1===t.nodeType})}},firstChild:{get:function(){return this.childNodes[0]}},firstElementChild:{get:function(){return this.children[0]}},innerHTML:{get:function(){return this.childNodes.map(function(t){return t.outerHTML||t.textContent}).join("")},set:function(t){var e=document.createElement("div");for(e.innerHTML=t;e.hasChildNodes();)this.appendChild(e.childNodes[0])}},lastChild:{get:function(){var t=this.childNodes;return t[t.length-1]}},lastElementChild:{get:function(){var t=this.children;return t[t.length-1]}},outerHTML:{get:function(){var t=this.tagName.toLowerCase(),e=[].slice.call(this.attributes).map(function(t){return" "+t.name+(t.value?"="+t.value:"")});return"<"+t+e+">"+this.innerHTML+"</"+t+">"}},textContent:{get:function(){return this.childNodes.map(function(t){return t.textContent}).join("")},set:function(t){var e=u.get(this);e&&(this[e]=document.createTextNode(t))}}},h={appendChild:function(t){var i=e(this,t);if(i||this[i])return this[i]=this[i].concat(n(t)),t},hasChildNodes:function(){return this.childNodes.length>0},insertBefore:function(t,i){var r=e(this,t);if(r&&this[r]){var o=this[r].indexOf(i);return this[r]=this[r].slice(0,o).concat(n(t)).concat(this[r].slice(o)),t}},removeChild:function(t){var n=e(this,t);if(n||this[n]){var i=this[n].indexOf(t);return this[n]=this[n].slice(0,i).concat(this[n].slice(i+1)),t}},replaceChild:function(t,i){var r=e(this,t);if(r&&this[r]){var o=this[r].indexOf(i);return this[r]=this[r].slice(0,o).concat(n(t)).concat(this[r].slice(o+1)),i}}},d="0.0.1",f={polyfill:i,polyfilled:t,render:r,slot:o,version:d},g=window.skatejsNamedSlots;return f.noConflict=function(){return window.skatejsNamedSlots=g,this},window.skatejsNamedSlots=f,f});
-//# sourceMappingURL=index.min.js.map
+("undefined"==typeof window?global:window).__e0f3ff9d2482bb4d7d1a054acdbf91f0=function(){var e={exports:{}},t=e.exports;return Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=new WeakMap,e.exports=t["default"],e.exports}.call(this),("undefined"==typeof window?global:window).__c5ff1991634757682d350a3d5a6d7487=function(){var e={exports:{}},t=e.exports;return Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=new WeakMap,e.exports=t["default"],e.exports}.call(this),("undefined"==typeof window?global:window).__d7d815c237595e6d764cb57744dca5a3=function(){var e={exports:{}},t=e.exports;return Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=new WeakMap,e.exports=t["default"],e.exports}.call(this),("undefined"==typeof window?global:window).__f7b10bf00c7af5bbec02f710b3134a30=function(){function e(e){return e&&e.__esModule?e:{"default":e}}var t={exports:{}},n=t.exports;Object.defineProperty(n,"__esModule",{value:!0});var r=__e0f3ff9d2482bb4d7d1a054acdbf91f0,d=e(r);return n["default"]=function(e){return d["default"].get(e)},t.exports=n["default"],t.exports}.call(this),("undefined"==typeof window?global:window).__c3b6c16d5a5beb9a0502d6861c6a5157=function(){function e(e){return e&&e.__esModule?e:{"default":e}}function t(e,t){var r=n(e,t),d=e[r];return r&&d?{key:r,val:d.slice()}:null}function n(e,t){return t.getAttribute&&t.getAttribute("slot")||p["default"].get(e)}function r(e){return e instanceof DocumentFragment?[].slice.call(e.childNodes):[e]}function d(e){return this[e]}function a(e){return e.item=d,e}function o(e,n,d){r(n).forEach(function(n){var r=t(e,n);r&&d(e,n,r)})}var f={exports:{}},u=f.exports;Object.defineProperty(u,"__esModule",{value:!0});var i=__e0f3ff9d2482bb4d7d1a054acdbf91f0,l=e(i),c=__c5ff1991634757682d350a3d5a6d7487,s=e(c),b=__d7d815c237595e6d764cb57744dca5a3,p=e(b),_=__f7b10bf00c7af5bbec02f710b3134a30,h=e(_),v=Object.defineProperty.bind(Object),x={childElementCount:{get:function(){return this.children.length}},childNodes:{get:function(){var e=this;return a((s["default"].get(this)||[]).reduce(function(t,n){return t.concat(e[n])},[]))}},children:{get:function(){return a(this.childNodes.filter(function(e){return 1===e.nodeType}))}},firstChild:{get:function(){return this.childNodes[0]}},firstElementChild:{get:function(){return this.children[0]}},innerHTML:{get:function(){return this.childNodes.map(function(e){return e.outerHTML||e.textContent}).join("")},set:function(e){var t=document.createElement("div");for(t.innerHTML=e;t.hasChildNodes();)this.appendChild(t.childNodes[0])}},lastChild:{get:function(){var e=this.childNodes;return e[e.length-1]}},lastElementChild:{get:function(){var e=this.children;return e[e.length-1]}},outerHTML:{get:function(){var e=this.tagName.toLowerCase(),t=[].slice.call(this.attributes).map(function(e){return" "+e.name+(e.value?'="'+e.value+'"':"")}).join("");return"<"+e+t+">"+this.innerHTML+"</"+e+">"}},textContent:{get:function(){return this.childNodes.map(function(e){return e.textContent}).join("")},set:function(e){var t=p["default"].get(this);t&&(this[t]=document.createTextNode(e))}}},w={appendChild:function(e){return o(this,e,function(e,t,n){n.val.push(t),e[n.key]=n.val}),e},hasChildNodes:function(){return this.childNodes.length>0},insertBefore:function(e,t){return o(this,e,function(e,n,r){var d=r.val.indexOf(t);-1===d?r.val.push(n):r.val.splice(d,0,n),e[r.key]=r.val}),e},removeChild:function(e){return o(this,e,function(e,t,n){var r=n.val.indexOf(t);-1!==r&&(n.val.splice(r,1),e[n.key]=n.val)}),e},replaceChild:function(e,t){return o(this,t,function(n,r,d){var a=d.val.indexOf(t);-1!==a&&(d.val.splice(a,1,e),n[d.key]=d.val)}),t}};return u["default"]=function(e){if(!(0,h["default"])(e)){for(var t in x)v(e,t,x[t]);for(var n in w)e[n]=w[n];l["default"].set(e,!0)}},f.exports=u["default"],f.exports}.call(this),("undefined"==typeof window?global:window).__4b1fb0087d27bc1c8cc501d2e3060c30=function(){function e(e){return e&&e.__esModule?e:{"default":e}}var t={exports:{}},n=t.exports;Object.defineProperty(n,"__esModule",{value:!0});var r=__c3b6c16d5a5beb9a0502d6861c6a5157,d=e(r),a=__e0f3ff9d2482bb4d7d1a054acdbf91f0,o=e(a);return n["default"]=function(e){return function(t){o["default"].get(t)?e(t):(e(t),(0,d["default"])(t))}},t.exports=n["default"],t.exports}.call(this),("undefined"==typeof window?global:window).__36ff6696f2c15c86c505cd37caa87aac=function(){function e(e){return e&&e.__esModule?e:{"default":e}}var t={exports:{}},n=t.exports;Object.defineProperty(n,"__esModule",{value:!0});var r=__c5ff1991634757682d350a3d5a6d7487,d=e(r),a=__d7d815c237595e6d764cb57744dca5a3,o=e(a);return n["default"]=function(e){return e||(e={"default":!1,set:null}),{coerce:function(e){return Array.isArray(e)?e:[e]},created:function(t,n){var r=d["default"].get(t);r||d["default"].set(t,r=[]),r.push(n.name),e["default"]&&o["default"].set(t,n.name)},"default":function(){return[]},initial:function(t,n){return[].slice.call(t.childNodes).filter(function(t){if(t.getAttribute){var r=t.getAttribute("slot")||e["default"]&&n.name;return r===n.name}return 3===t.nodeType?!0:void 0})},set:e.set}},t.exports=n["default"],t.exports}.call(this),("undefined"==typeof window?global:window).__f3b5bbf7c2869a091610ee437003226b=function(){var e={exports:{}},t=e.exports;return Object.defineProperty(t,"__esModule",{value:!0}),t["default"]="0.0.1",e.exports=t["default"],e.exports}.call(this),("undefined"==typeof window?global:window).__c62e2a3f85bb48383fbab4fda1d3137c=function(){function e(e){return e&&e.__esModule?e:{"default":e}}var t={exports:{}},n=t.exports;Object.defineProperty(n,"__esModule",{value:!0});var r=__c3b6c16d5a5beb9a0502d6861c6a5157,d=e(r),a=__f7b10bf00c7af5bbec02f710b3134a30,o=e(a),f=__4b1fb0087d27bc1c8cc501d2e3060c30,u=e(f),i=__36ff6696f2c15c86c505cd37caa87aac,l=e(i),c=__f3b5bbf7c2869a091610ee437003226b,s=e(c);return n["default"]={polyfill:d["default"],polyfilled:o["default"],render:u["default"],slot:l["default"],version:s["default"]},t.exports=n["default"],t.exports}.call(this),("undefined"==typeof window?global:window).__911af63b703cd92dd8341dd8c6151193=function(){function e(e){return e&&e.__esModule?e:{"default":e}}var t={exports:{}},n=t.exports;Object.defineProperty(n,"__esModule",{value:!0});var r=__c62e2a3f85bb48383fbab4fda1d3137c,d=e(r);return window.skateNamedSlots=d["default"],n["default"]=d["default"],t.exports=n["default"],t.exports}.call(this);

lib/index.js

 (function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(['module', 'exports', './polyfill', './polyfilled', './render', './slot', './version'], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(module, exports, require('./polyfill'), require('./polyfilled'), require('./render'), require('./slot'), require('./version'));
+  if (typeof define === 'function' && define.amd) {
+    define(['exports', 'module', './polyfill', './polyfilled', './render', './slot', './version'], factory);
+  } else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
+    factory(exports, module, require('./polyfill'), require('./polyfilled'), require('./render'), require('./slot'), require('./version'));
   } else {
@@ -10,11 +10,9 @@ var mod = {
     };
-    factory(mod, mod.exports, global.polyfill, global.polyfilled, global.render, global.slot, global.version);
+    factory(mod.exports, mod, global.polyfill, global.polyfilled, global.render, global.slot, global.version);
     global.index = mod.exports;
   }
-})(this, function (module, exports, _polyfill, _polyfilled, _render, _slot, _version) {
+})(this, function (exports, module, _polyfill, _polyfilled, _render, _slot, _version) {
   'use strict';
 
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
@@ -31,16 +29,9 @@ var _polyfill2 = _interopRequireDefault(_polyfill);
 
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-      default: obj
-    };
-  }
-
-  exports.default = {
-    polyfill: _polyfill2.default,
-    polyfilled: _polyfilled2.default,
-    render: _render2.default,
-    slot: _slot2.default,
-    version: _version2.default
+  module.exports = {
+    polyfill: _polyfill2['default'],
+    polyfilled: _polyfilled2['default'],
+    render: _render2['default'],
+    slot: _slot2['default'],
+    version: _version2['default']
   };
-  module.exports = exports['default'];
 });

lib/internal/map/patch.js

 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["module", "exports"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(module, exports);
+    define(["exports", "module"], factory);
+  } else if (typeof exports !== "undefined" && typeof module !== "undefined") {
+    factory(exports, module);
   } else {
@@ -10,13 +10,9 @@ var mod = {
     };
-    factory(mod, mod.exports);
+    factory(mod.exports, mod);
     global.patch = mod.exports;
   }
-})(this, function (module, exports) {
+})(this, function (exports, module) {
   "use strict";
 
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.default = new WeakMap();
-  module.exports = exports['default'];
+  module.exports = new WeakMap();
 });

lib/internal/map/slots-default.js

 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["module", "exports"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(module, exports);
+    define(["exports", "module"], factory);
+  } else if (typeof exports !== "undefined" && typeof module !== "undefined") {
+    factory(exports, module);
   } else {
@@ -10,13 +10,9 @@ var mod = {
     };
-    factory(mod, mod.exports);
+    factory(mod.exports, mod);
     global.slotsDefault = mod.exports;
   }
-})(this, function (module, exports) {
+})(this, function (exports, module) {
   "use strict";
 
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.default = new WeakMap();
-  module.exports = exports['default'];
+  module.exports = new WeakMap();
 });

lib/internal/map/slots.js

 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["module", "exports"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(module, exports);
+    define(["exports", "module"], factory);
+  } else if (typeof exports !== "undefined" && typeof module !== "undefined") {
+    factory(exports, module);
   } else {
@@ -10,13 +10,9 @@ var mod = {
     };
-    factory(mod, mod.exports);
+    factory(mod.exports, mod);
     global.slots = mod.exports;
   }
-})(this, function (module, exports) {
+})(this, function (exports, module) {
   "use strict";
 
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.default = new WeakMap();
-  module.exports = exports['default'];
+  module.exports = new WeakMap();
 });

lib/polyfill.js

 (function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(['module', 'exports', './internal/map/patch', './internal/map/slots', './internal/map/slots-default', './polyfilled'], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(module, exports, require('./internal/map/patch'), require('./internal/map/slots'), require('./internal/map/slots-default'), require('./polyfilled'));
+  if (typeof define === 'function' && define.amd) {
+    define(['exports', 'module', './internal/map/patch', './internal/map/slots', './internal/map/slots-default', './polyfilled'], factory);
+  } else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
+    factory(exports, module, require('./internal/map/patch'), require('./internal/map/slots'), require('./internal/map/slots-default'), require('./polyfilled'));
   } else {
@@ -10,48 +10,33 @@ var mod = {
     };
-    factory(mod, mod.exports, global.patch, global.slots, global.slotsDefault, global.polyfilled);
+    factory(mod.exports, mod, global.mapPatch, global.mapSlots, global.mapSlotsDefault, global.polyfilled);
     global.polyfill = mod.exports;
   }
-})(this, function (module, exports, _patch, _slots, _slotsDefault, _polyfilled) {
+})(this, function (exports, module, _internalMapPatch, _internalMapSlots, _internalMapSlotsDefault, _polyfilled) {
   'use strict';
 
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-  exports.default = function (elem) {
-    if ((0, _polyfilled2.default)(elem)) {
-      return;
-    }
+  var _mapPatch = _interopRequireDefault(_internalMapPatch);
 
-    for (var name in props) {
-      prop(elem, name, props[name]);
-    }
+  var _mapSlots = _interopRequireDefault(_internalMapSlots);
 
-    for (var name in funcs) {
-      elem[name] = funcs[name];
-    }
+  var _mapSlotsDefault = _interopRequireDefault(_internalMapSlotsDefault);
 
-    _patch2.default.set(elem, true);
-  };
+  var _polyfilled2 = _interopRequireDefault(_polyfilled);
 
-  var _patch2 = _interopRequireDefault(_patch);
+  var prop = Object.defineProperty.bind(Object);
 
-  var _slots2 = _interopRequireDefault(_slots);
+  // Helpers.
 
-  var _slotsDefault2 = _interopRequireDefault(_slotsDefault);
-
-  var _polyfilled2 = _interopRequireDefault(_polyfilled);
-
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-      default: obj
-    };
+  function getSlot(elem, node) {
+    var key = getSlotName(elem, node);
+    var val = elem[key];
+    return key && val ? { key: key, val: val.slice() } : null;
   }
 
-  var prop = Object.defineProperty.bind(Object);
-
   function getSlotName(elem, node) {
-    return node.getAttribute && node.getAttribute('slot') || _slotsDefault2.default.get(elem);
+    return node.getAttribute && node.getAttribute('slot') || _mapSlotsDefault['default'].get(elem);
   }
 
+  // TODO use in DOM manip methods to make them DocumentFragment compatible.
   function nodeToArray(node) {
@@ -61,2 +46,13 @@ return node instanceof DocumentFragment ? [].slice.call(node.childNodes) : [node];
 
+  function arrayItem(idx) {
+    return this[idx];
+  }
+
+  function makeLikeNodeList(arr) {
+    arr.item = arrayItem;
+    return arr;
+  }
+
+  // Prop overrides.
+
   var props = {
@@ -72,5 +68,5 @@ childElementCount: {
 
-        return (_slots2.default.get(this) || []).reduce(function (prev, curr) {
+        return makeLikeNodeList((_mapSlots['default'].get(this) || []).reduce(function (prev, curr) {
           return prev.concat(_this[curr]);
-        }, []);
+        }, []));
       }
@@ -80,5 +76,5 @@ },
       get: function get() {
-        return this.childNodes.filter(function (node) {
+        return makeLikeNodeList(this.childNodes.filter(function (node) {
           return node.nodeType === 1;
-        });
+        }));
       }
@@ -105,3 +101,2 @@ },
         div.innerHTML = val;
-
         while (div.hasChildNodes()) {
@@ -128,4 +123,4 @@ this.appendChild(div.childNodes[0]);
         var attributes = [].slice.call(this.attributes).map(function (attr) {
-          return ' ' + attr.name + (attr.value ? '=' + attr.value : '');
-        });
+          return ' ' + attr.name + (attr.value ? '="' + attr.value + '"' : '');
+        }).join('');
         return '<' + name + attributes + '>' + this.innerHTML + '</' + name + '>';
@@ -141,4 +136,3 @@ }
       set: function set(val) {
-        var slot = _slotsDefault2.default.get(this);
-
+        var slot = _mapSlotsDefault['default'].get(this);
         if (slot) {
@@ -150,7 +144,20 @@ this[slot] = document.createTextNode(val);
   };
+
+  function doForNodesIfSlot(elem, node, func) {
+    nodeToArray(node).forEach(function (node) {
+      var slot = getSlot(elem, node);
+      if (slot) {
+        func(elem, node, slot);
+      }
+    });
+  }
+
+  // Method overrides.
+
   var funcs = {
     appendChild: function appendChild(newNode) {
-      var name = getSlotName(this, newNode);
-      if (!name && !this[name]) return;
-      this[name] = this[name].concat(nodeToArray(newNode));
+      doForNodesIfSlot(this, newNode, function (elem, node, slot) {
+        slot.val.push(node);
+        elem[slot.key] = slot.val;
+      });
       return newNode;
@@ -162,24 +169,52 @@ },
     insertBefore: function insertBefore(newNode, refNode) {
-      var name = getSlotName(this, newNode);
-      if (!name || !this[name]) return;
-      var index = this[name].indexOf(refNode);
-      this[name] = this[name].slice(0, index).concat(nodeToArray(newNode)).concat(this[name].slice(index));
+      doForNodesIfSlot(this, newNode, function (elem, node, slot) {
+        var index = slot.val.indexOf(refNode);
+        if (index === -1) {
+          slot.val.push(node);
+        } else {
+          slot.val.splice(index, 0, node);
+        }
+        elem[slot.key] = slot.val;
+      });
       return newNode;
     },
     removeChild: function removeChild(refNode) {
-      var name = getSlotName(this, refNode);
-      if (!name && !this[name]) return;
-      var index = this[name].indexOf(refNode);
-      this[name] = this[name].slice(0, index).concat(this[name].slice(index + 1));
+      doForNodesIfSlot(this, refNode, function (elem, node, slot) {
+        var index = slot.val.indexOf(node);
+        if (index !== -1) {
+          slot.val.splice(index, 1);
+          elem[slot.key] = slot.val;
+        }
+      });
       return refNode;
     },
     replaceChild: function replaceChild(newNode, refNode) {
-      var name = getSlotName(this, newNode);
-      if (!name || !this[name]) return;
-      var index = this[name].indexOf(refNode);
-      this[name] = this[name].slice(0, index).concat(nodeToArray(newNode)).concat(this[name].slice(index + 1));
+      doForNodesIfSlot(this, refNode, function (elem, node, slot) {
+        var index = slot.val.indexOf(refNode);
+        if (index !== -1) {
+          slot.val.splice(index, 1, newNode);
+          elem[slot.key] = slot.val;
+        }
+      });
       return refNode;
     }
   };
-  module.exports = exports['default'];
+
+  // Polyfills an element.
+
+  module.exports = function (elem) {
+    if ((0, _polyfilled2['default'])(elem)) {
+      return;
+    }
+
+    for (var _name in props) {
+      prop(elem, _name, props[_name]);
+    }
+
+    for (var _name2 in funcs) {
+      elem[_name2] = funcs[_name2];
+    }
+
+    _mapPatch['default'].set(elem, true);
+  };
 });

lib/polyfilled.js

 (function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(['module', 'exports', './internal/map/patch'], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(module, exports, require('./internal/map/patch'));
+  if (typeof define === 'function' && define.amd) {
+    define(['exports', 'module', './internal/map/patch'], factory);
+  } else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
+    factory(exports, module, require('./internal/map/patch'));
   } else {
@@ -10,25 +10,17 @@ var mod = {
     };
-    factory(mod, mod.exports, global.patch);
+    factory(mod.exports, mod, global.mapPatch);
     global.polyfilled = mod.exports;
   }
-})(this, function (module, exports, _patch) {
+})(this, function (exports, module, _internalMapPatch) {
   'use strict';
 
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-  exports.default = function (elem) {
-    return _patch2.default.get(elem);
-  };
+  var _mapPatch = _interopRequireDefault(_internalMapPatch);
 
-  var _patch2 = _interopRequireDefault(_patch);
+  // Returns whether or not the specified element has been polyfilled.
 
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-      default: obj
-    };
-  }
-
-  module.exports = exports['default'];
+  module.exports = function (elem) {
+    return _mapPatch['default'].get(elem);
+  };
 });

lib/render.js

 (function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(['module', 'exports', './polyfill', './internal/map/patch'], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(module, exports, require('./polyfill'), require('./internal/map/patch'));
+  if (typeof define === 'function' && define.amd) {
+    define(['exports', 'module', './polyfill', './internal/map/patch'], factory);
+  } else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
+    factory(exports, module, require('./polyfill'), require('./internal/map/patch'));
   } else {
@@ -10,34 +10,28 @@ var mod = {
     };
-    factory(mod, mod.exports, global.polyfill, global.patch);
+    factory(mod.exports, mod, global.polyfill, global.mapPatch);
     global.render = mod.exports;
   }
-})(this, function (module, exports, _polyfill, _patch) {
+})(this, function (exports, module, _polyfill, _internalMapPatch) {
   'use strict';
 
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-  exports.default = function (fn) {
+  var _polyfill2 = _interopRequireDefault(_polyfill);
+
+  var _mapPatch = _interopRequireDefault(_internalMapPatch);
+
+  // Simple renderer that proxies another renderer. It will polyfill if not yet
+  // polyfilled, or simply run the renderer. Initial content is taken into
+  // consideration.
+
+  module.exports = function (fn) {
     return function (elem) {
-      if (_patch2.default.get(elem)) {
+      if (_mapPatch['default'].get(elem)) {
         fn(elem);
       } else {
         fn(elem);
-        (0, _polyfill2.default)(elem);
+        (0, _polyfill2['default'])(elem);
       }
     };
   };
-
-  var _polyfill2 = _interopRequireDefault(_polyfill);
-
-  var _patch2 = _interopRequireDefault(_patch);
-
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-      default: obj
-    };
-  }
-
-  module.exports = exports['default'];
 });

lib/slot.js

 (function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(['module', 'exports', './internal/map/slots', './internal/map/slots-default'], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(module, exports, require('./internal/map/slots'), require('./internal/map/slots-default'));
+  if (typeof define === 'function' && define.amd) {
+    define(['exports', 'module', './internal/map/slots', './internal/map/slots-default'], factory);
+  } else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
+    factory(exports, module, require('./internal/map/slots'), require('./internal/map/slots-default'));
   } else {
@@ -10,16 +10,21 @@ var mod = {
     };
-    factory(mod, mod.exports, global.slots, global.slotsDefault);
+    factory(mod.exports, mod, global.mapSlots, global.mapSlotsDefault);
     global.slot = mod.exports;
   }
-})(this, function (module, exports, _slots, _slotsDefault) {
+})(this, function (exports, module, _internalMapSlots, _internalMapSlotsDefault) {
   'use strict';
 
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-  exports.default = function (opts) {
+  var _mapSlots = _interopRequireDefault(_internalMapSlots);
+
+  var _mapSlotsDefault = _interopRequireDefault(_internalMapSlotsDefault);
+
+  // Creates a slot property compatible with the SkateJS custom property
+  // definitions. Makes web component integration much simpler.
+
+  module.exports = function (opts) {
     if (!opts) {
       opts = {
-        default: false,
+        'default': false,
         set: null
@@ -37,6 +42,6 @@ };
       created: function created(elem, data) {
-        var slots = _slots2.default.get(elem);
+        var slots = _mapSlots['default'].get(elem);
 
         if (!slots) {
-          _slots2.default.set(elem, slots = []);
+          _mapSlots['default'].set(elem, slots = []);
         }
@@ -46,4 +51,4 @@
 
-        if (opts.default) {
-          _slotsDefault2.default.set(elem, data.name);
+        if (opts['default']) {
+          _mapSlotsDefault['default'].set(elem, data.name);
         }
@@ -61,4 +66,6 @@ },
           if (ch.getAttribute) {
-            var slot = ch.getAttribute('slot') || opts.default && data.name;
+            var slot = ch.getAttribute('slot') || opts['default'] && data.name;
             return slot === data.name;
+          } else if (ch.nodeType === 3) {
+            return true;
           }
@@ -72,14 +79,2 @@ });
   };
-
-  var _slots2 = _interopRequireDefault(_slots);
-
-  var _slotsDefault2 = _interopRequireDefault(_slotsDefault);
-
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-      default: obj
-    };
-  }
-
-  module.exports = exports['default'];
 });

lib/version.js

 (function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(['module', 'exports'], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(module, exports);
+  if (typeof define === 'function' && define.amd) {
+    define(['exports', 'module'], factory);
+  } else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
+    factory(exports, module);
   } else {
@@ -10,13 +10,9 @@ var mod = {
     };
-    factory(mod, mod.exports);
+    factory(mod.exports, mod);
     global.version = mod.exports;
   }
-})(this, function (module, exports) {
+})(this, function (exports, module) {
   'use strict';
 
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.default = '0.0.1';
-  module.exports = exports['default'];
+  module.exports = '0.0.1';
 });

package.json

 {
   "name": "skatejs-named-slots",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A polygap (partial polyfill) for the Shadow DOM Named Slot API.",
@@ -30,5 +30,6 @@ "main": "lib/index.js",
     "eslint": "1.10.3",
+    "eslint-plugin-react": "^3.16.1",
     "gulp": "gulpjs/gulp#73eced0",
-    "skatejs-build": "skatejs/build#654f33e"
+    "skatejs-build": "skatejs/build#feda154"
   }
 }

README.md

@@ -15,3 +15,3 @@ # named-slots
 - You don't need allthethings in the [Shadow DOM spec](http://w3c.github.io/webcomponents/spec/shadow/)
-- You want interopability with React, jQuery and other libraries that don't care about your implementation details
+- You want interopaberability with React, jQuery and other libraries that don't care about your implementation details
 
@@ -18,0 +18,0 @@

src/index.js

@@ -1,6 +0,1 @@
-
-
-
-
-
 import polyfill from './polyfill';
@@ -7,0 +2,0 @@ import polyfilled from './polyfilled';

src/polyfill.js

@@ -11,2 +11,8 @@ import mapPatch from './internal/map/patch';
 
+function getSlot (elem, node) {
+  const key = getSlotName(elem, node);
+  const val = elem[key];
+  return key && val ? { key, val: val.slice() } : null;
+}
+
 function getSlotName (elem, node) {
@@ -16,2 +22,3 @@ return node.getAttribute && node.getAttribute('slot') || mapSlotsDefault.get(elem);
 
+// TODO use in DOM manip methods to make them DocumentFragment compatible.
 function nodeToArray (node) {
@@ -21,3 +28,12 @@ return node instanceof DocumentFragment ? [].slice.call(node.childNodes) : [node];
 
+function arrayItem (idx) {
+  return this[idx];
+}
 
+function makeLikeNodeList (arr) {
+  arr.item = arrayItem;
+  return arr;
+}
+
+
 // Prop overrides.
@@ -33,3 +49,3 @@
     get () {
-      return (mapSlots.get(this) || []).reduce((prev, curr) => prev.concat(this[curr]), []);
+      return makeLikeNodeList((mapSlots.get(this) || []).reduce((prev, curr) => prev.concat(this[curr]), []));
     }
@@ -39,3 +55,3 @@ },
     get () {
-      return this.childNodes.filter(node => node.nodeType === 1);
+      return makeLikeNodeList(this.childNodes.filter(node => node.nodeType === 1));
     }
@@ -79,6 +95,6 @@ },
     get () {
-      var name = this.tagName.toLowerCase();
-      var attributes = [].slice.call(this.attributes).map(function (attr) {
-        return ` ${attr.name}${attr.value ? `=${attr.value}` : ''}`;
-      });
+      const name = this.tagName.toLowerCase();
+      const attributes = [].slice.call(this.attributes).map(function (attr) {
+        return ` ${attr.name}${attr.value ? `="${attr.value}"` : ''}`;
+      }).join('');
       return `<${name}${attributes}>${this.innerHTML}</${name}>`;
@@ -100,3 +116,12 @@ }
 
+function doForNodesIfSlot (elem, node, func) {
+  nodeToArray(node).forEach(function (node) {
+    const slot = getSlot(elem, node);
+    if (slot) {
+      func(elem, node, slot);
+    }
+  });
+}
 
+
 // Method overrides.
@@ -106,5 +131,6 @@
   appendChild (newNode) {
-    const name = getSlotName(this, newNode);
-    if (!name && !this[name]) return;
-    this[name] = this[name].concat(nodeToArray(newNode));
+    doForNodesIfSlot(this, newNode, function (elem, node, slot) {
+      slot.val.push(node);
+      elem[slot.key] = slot.val;
+    });
     return newNode;
@@ -116,20 +142,31 @@ },
   insertBefore (newNode, refNode) {
-    const name = getSlotName(this, newNode);
-    if (!name || !this[name]) return;
-    const index = this[name].indexOf(refNode);
-    this[name] = this[name].slice(0, index).concat(nodeToArray(newNode)).concat(this[name].slice(index));
+    doForNodesIfSlot(this, newNode, function (elem, node, slot) {
+      const index = slot.val.indexOf(refNode);
+      if (index === -1) {
+        slot.val.push(node);
+      } else {
+        slot.val.splice(index, 0, node);
+      }
+      elem[slot.key] = slot.val;
+    });
     return newNode;
   },
   removeChild (refNode) {
-    const name = getSlotName(this, refNode);
-    if (!name && !this[name]) return;
-    const index = this[name].indexOf(refNode);
-    this[name] = this[name].slice(0, index).concat(this[name].slice(index + 1));
+    doForNodesIfSlot(this, refNode, function (elem, node, slot) {
+      const index = slot.val.indexOf(node);
+      if (index !== -1) {
+        slot.val.splice(index, 1);
+        elem[slot.key] = slot.val;
+      }
+    });
     return refNode;
   },
   replaceChild (newNode, refNode) {
-    const name = getSlotName(this, newNode);
-    if (!name || !this[name]) return;
-    const index = this[name].indexOf(refNode);
-    this[name] = this[name].slice(0, index).concat(nodeToArray(newNode)).concat(this[name].slice(index + 1));
+    doForNodesIfSlot(this, refNode, function (elem, node, slot) {
+      const index = slot.val.indexOf(refNode);
+      if (index !== -1) {
+        slot.val.splice(index, 1, newNode);
+        elem[slot.key] = slot.val;
+      }
+    });
     return refNode;
@@ -136,0 +173,0 @@ }

src/render.js

@@ -16,2 +16,2 @@ import polyfill from './polyfill';
   };
-}
+}

src/slot.js

@@ -46,2 +46,4 @@ import mapSlots from './internal/map/slots';
           return slot === data.name;
+        } else if (ch.nodeType === 3) {
+          return true;
         }
@@ -48,0 +50,0 @@ });

test/unit.js

@@ -0,1 +1,2 @@
+import render from '../src/render';
 import version from '../src/version';
@@ -2,0 +3,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

1059

increased by24%

Worsened metrics

Total package byte prevSize

49911

decreased by-18.48%

Dev dependency count

4

increased by33.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes