x-tag/core

The Heart of X-Tag

X-Tag Components

Get the latest X-Tag core library and components.

Included Components:

• x-tag-core https://github.com/x-tag/core
• x-tag-accordion https://github.com/x-tag/accordion
• x-tag-appbar https://github.com/x-tag/appbar
• x-tag-code-prism https://github.com/x-tag/code-prism
• x-tag-flipbox https://github.com/x-tag/flipbox
• x-tag-growbox https://github.com/x-tag/growbox
• x-tag-leaflet-map https://github.com/x-tag/map
• x-tag-mediaquery https://github.com/x-tag/mediaquery
• x-tag-mixin-request https://github.com/pennyfx/mixin-request
• x-tag-modal https://github.com/x-tag/modal
• x-tag-panel https://github.com/x-tag/panel
• x-tag-shiftbox https://github.com/x-tag/shiftbox
• x-tag-slidebox https://github.com/x-tag/slidebox
• x-tag-spinner https://github.com/x-tag/spinner
• x-tag-switch https://github.com/x-tag/switch
• x-tag-toggle https://github.com/x-tag/toggle

More components are available on Bower.

  $ bower search x-tag

Developers

Build

This distributable files under ./dist/ are generated by running the following commands

  # Install npm dependencies.  Bower, Grunt and grunt tasks.
  $ npm install

  # Downloads all packages listed under 'dependencies' in bower.json to
  # ./components/ directory.
  $ bower install

  # Concats together the downloaded X-Tags from ./components and places
  # the results in ./dist/
  $ grunt build

Custom Build

If you would like to make a custom build you can do so by modifying the packages listed in the bower.json file and rerunning the commands above.

core's Issues

x-meme tag

@potch and I discussed an x-meme tag yesterday that could benefit webmaker. Instead of hard-baking font into a pic (like meme generators do) or not connecting image and pic (like webmaker), it could

• take the caption from the tag and render it on the image,
• but it would also need to have a way to make this permanent and share the URL (context menu? imgur integration?)

Is it possible to use <template> with x-tag?

There's a mention to <template> elements in the latest blog post:
x-tag/x-tags-org@009f4d0#L0R60 (sorry about the awful line-linking but the blog doesn't have permalinks I can link to :-P)

But no example. I have tried doing this:

<template id="testTemplate">
    This is just a test.
</template>

and

xtag.register('test-thing', {
    lifecycle: {
        created: function() {
            var tpl = document.getElementById('testTemplate').content;
            this.innerHTML = tpl.cloneNode(true);
        }
    }
});

var thing = document.createElement('test-thing');
document.body.appendChild(thing);

but I just get a big [object DocumentFragment] string instead of the content I expected. I feel like there should be an easier way to do this with X-Tag but I just haven't found it...

e.preventDefault on custom events does not carry into base event

When I have a listener function for a custom event such as "tapstart", e.preventDefault does not work as intended, and users must explicitly call e.baseEvent.preventDefault.

This could easily be a point of confusion, and also breaks backwards compatibility with older code.

Better documentation

The x-tags site could stand to be updated with more extensive documentation, as there are a lot of things going undocumented.

For example, the accessor's attribute property (as well as its options) for xtag.register is undocumented, but this is a very useful property for developing components.

Other useful things that could use documentation, off the top of my head:

• removing events added by addEvent
• xtag.skipTransition
• firing custom events with fireEvent (as well custom data in e.detail)
• mixins, such as request

Making this an enhancement issue to track progress on this.

uglification fails during build

My first time trying to build x-tag. I want to try and develop my own components. Here is where I got stuck:

[~/Projects/x-tag-core(master)]$ grunt build --force
Running "jshint:all" (jshint) task
>> 4 files lint free.

Running "concat:core" (concat) task
File "dist/x-tag-core.js" created.

Running "uglify:all" (uglify) task
Warning: Uglification failed. Used --force, continuing.
Warning: Cannot read property 'min' of undefined Used --force, continuing.

Done, but with warnings.
[~/Projects/x-tag-core(master)]$ ls dist/
x-tag-core.js

Any suggestions how I resolve the problem? I on Linux.

Document event delegation

I think I've asked about this in meetings a couple of times before, so for the sake of trackability and posterity and all things ity, here it goes: event delegation needs to be documented.

All the mentions to delegate in the docs are pretty obscure. Example:

events: {
    'click:delegate(x-toggler)': function(){
      // activate a clicked toggler
    }
  }

What does delegate in this context mean? Am I listening to the click event or I'm delegating the click event to the x-toggler? Also, what does delegate mean DOM event-wise? Does it bubble? Etc.

I've also tried to deduct how it works by looking at the code in existing components but for some reason I can't. Help!

Also, I was unsure whether this bug should go here or in the x-tags-org repo, so forgive me if it went to the wrong place :-)

offsetHeight and offsetWidth returns 0

I'm playing with Xtags and found something weird.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />

    <title>X-Tag - Test</title>

    <link rel="stylesheet" type="text/css" href="http://www.x-tags.org/css/x-tag-components.css"/>
    <script type="text/javascript" src="http://www.x-tags.org/js/x-tag-components.min.js"></script>

    <script type="text/javascript">
        xtag.register('x-holder', {
            lifecycle:{
                created: function(){
                    this.innerHTML = "<div style='width: 500px; height: 500px; border: 1px solid red;'></div>";
                    console.log('Y: ' + this.offsetHeight);
                    console.log('X: ' + this.offsetWidth);
                }

            }
        });

    </script>

</head>

<body>
<x-holder id='test'> </x-holder>
</body>

</html>

After this my console debug is:

X: 0
Y: 0

updating HTMLImports is failing

git submodule update --recursive
fatal: reference is not a tree: 762b7fa797d9afe3ec50597da4dd5bae99574cb6
Unable to checkout '762b7fa797d9afe3ec50597da4dd5bae99574cb6' in submodule path 'lib/HTMLImports'

Self closing tags?

I was wondering if there's any sort of rule in the spec for custom elements that says that they have to be "block" type elements. I tried creating a <self-closing /> element but it didn't quite work. The following code:

<strong>hello</strong> <self-closing /> <em>other content</em>

should output

hello self closing other content

but it actually just outputs

hello self closing

Live demo here:
http://people.mozilla.org/~spenades/test_cases/xtag-selfclosing/

NS_ERROR_XPC_BAD_OP_ON_WN_PROTO error when loaded into Firefox OS simulator

Environment:

• Firefox (21.0 and 22.0 and 25.0) + Firefox OS Simulator 4.0
  and
  Firefox 25.0 + Firefox OS Simulator 5.0pre4
• Fedora Linux 17 64bit

I get this error:

NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object

if I try to include the x-tags library in a project and load it into the Firefox OS simulator. x-tags works fine if I push it to the device itself. (So I'm not sure if I should be raising a bug for the simulator too/instead.)

To reproduce:

• Make an HTML file with a script tag which pulls in x-tag-core (I'm using a version checked out with bower, 0.8.1):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="x-tag-core/dist/x-tag-core.js"></script>
</head>
<body>
</body>
</html>

• Make a manifest.webapp file for it in the same directory:

{
  "name": "x-tags",
  "type": "privileged",
  "description": "testing x-tags",
  "launch_path": "/index.html",
  "icons": {},
  "developer": {
    "name": "foo",
    "url": "http://foo/"
  },
  "default_locale": "en",
  "permissions": {}
}

• Load the project's manifest in the simulator, with "Connect" enabled so you can see the error messages.

The error is being raised by line 2902 of the built file, which corresponds with https://github.com/x-tag/core/blob/master/src/core.js#L856.

If I comment this line out, x-tags loads fine and works as expected.

Also, it looks as though L856 does approximately the same thing as the line before (though I imagine there are differences and it's probably important that a property is defined, as well as set explicitly).

IE 8 support?

While this sounds and looks great, I think the vast majority of us are in the position of having to support IE below version 9. So the sad reality is that unless this can be supported in IE 8 there really is no point in considering to use this in regular projects for at least another year.

Yet, about 8 months ago Dandonkulous wrote this about X-Tag and IE support:
"Yeah the funny thing is I could actually even make it work in IE6 and 7 if I used Mutation for IE9 and then - ready your pitchforks and torches folks - proprietary CSS Behavior script ducks to avoid tomato. IE8 screwed the pooch in this regard - they removed CSS Behaviors but failed to implement anything that could be used to do the same sort of thing."
http://news.ycombinator.com/item?id=4117949

Is this still be a possibility?

x-slidebox, Slides are all visible,

http://jsfiddle.net/samarthwiz/rHrGb/

Examples, examples, examples

The docs page is lacking on examples on many sections, and the existing examples might feel quite misleading/vague.

For example:

accessors: {
    'togglers': {
      get: function(){
        // return all toggler children
      },
      set: function(value){
        // set the toggler children
      }
    }
  },

How do I return toggler children? Where do they come from? How do I set them? Confusing.

And another example: The documentation for createFragment is "Creates a document fragment out of the passed element.". So... why would I want to do that? How does it help me? We need examples :-)

element.classList for add/remove/has/toggle Class

This will save us a good chunk of code.

https://developer.mozilla.org/en-US/docs/DOM/element.classList

xtag vs. polymer-elements?

Noticing both xtag and polymer-elements use polymer pollyfills can someone explain why I should choose xtag or polymer-elements / polymer-ui-elements?

Attribute syncing does not work unless setter is present

When an accessor is defined as an attribute without a setter function, the attribute is not synced correctly, even if an attribute selector is defined.

To see this in action, see the following test files:

• demo.html
• sync_wo_setter.js

If you run this demo and inspect the element, note that the span which should be synced does not receive the "foo" attribute unless a setter is initialized in xtag.register, even if that setter is simply an empty function.

This is using the repo as of 226e794

web site broken in iceweasel 10.0.12

when you goto doc/faq/registry etc, you just see an empty screen.

from the console

uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://www.x-tags.org/js/x-tag-components.min.js :: o :: line 1" data: no]

if the browser's not modern enough, can't we tell the user?

Don't invoke document.register before CustomElements.ready

The xtag.register wrapper creates a createdCallback that is supposed to get invoked by the underlying implementation of document.register. In the Polymer polyfill, the createdCallback is not always invoked. As X-tag currently uses it, Polymer.register will only 'upgrade' elements into components if window.CustomElements.ready is true. CustomElements.ready is set to true as a final act of loading the Polymer polyfill, but only if document.readyState === 'complete'. If document.readyState !== 'complete', Polymer adds an eventListener for the DOMContentLoaded event, and sets window.CustomElements.ready to true in that handler.

Consequently, if xtag.register invokes Polymer's document.register before document.readyState === 'complete', existing instances of the component will not be 'upgraded' by Polymer. So their methods will never exist, their lifecycle will not be observed, etc.

So, when using Polymer's pollyfill, if document.readyState !== 'complete' xtag.register needs to wait for a DOMContentLoaded event before it invokes document.register.

I don't know about native implementations of document.register, but it might not hurt to wait for the DOM to load for all implementations.

Decide on mixin behavior

Currently mixins in X-Tag are used as follows:

xtag.mixins.fly = {
  methods: {
    start: function(){
      alert('fly mixin start');
    }
  }
};

xtag.mixins.swim = {
  methods: {
    start: function(){
      alert('swim mixin start');
    }
  }
};

xtag.register('x-my-element', {
  mixins: ['fly', 'swim'],
  methods: {
    start: function(){
      alert('x-my-element start');
    }
  }
});

Under the current model, when functions overlap, they are merged into one function and invoked in serial order. Applying this to the example above, the output of calling the start() method on an <x-my-element, the alerts would all be called, and in the following order:

'x-my-element start'
'fly mixin start'
'swim mixin start'

Other mixin implementations opt for manual resolution by the developer when functions overlap, or choose the last mixin in the set (right-to-left) to use. We wanted to get an idea of what people thought of this. Based on feedback, we could also tweak this system a bit so overlapping mixin functions are merged and called serially unless there was an existing function on the element's registration object, in which case it would then require the user to resolve/call any desired mixins in the order/place they want - here's an example:

xtag.mixins.fly = {
  methods: {
    start: function(arg1, arg2){
      alert('fly mixin start');
    }
  }
};

xtag.mixins.swim = {
  methods: {
    start: function(arg1, arg2){
      alert('swim mixin start');
    }
  }
};

xtag.register('x-my-element', {
  mixins: ['fly', 'swim'],
  methods: {
    start: function(arg1, arg2){
      alert('x-my-element start');
      this.mixins('fly', arg1, arg2);
      this.mixins('swim', arg1, arg2);
    }
  }
});

In the above, the code this.mixins('fly', arg1, arg2) is an example of what resolution of colliding functions would look like. Basically, this.mixins is a 'smart' function that knows the scope it is being invoked in - for this example, that's the start function. The smart this.mixins function automatically would call the start function on the mixin passed into it. This is also just an idea, which (using the example) would essentially be the shorthand equivalent of: xtag.mixins.fly.methods.start.call(this, arg1, arg2). Maybe that's not a big deal, and we don't provide anything for the manual resolution case - we'd love to hear from you on that!

QR code tag

QR codes are everywhere (though their UX is questionable). It would be splendid to have a tag:

<x-qr>http://mozilla.org</x-qr>

and it appears.

That would also enable QR codes to be accessible. How hot is that.

Style tags in Element tags don't work when the element is being imported.

Description

Putting a style tag in an element tag causes the style tag to not register any styles
when that document is imported.

Reproduction

<element name="x-foo">
  <style>
    .red { color: red; }
  </style>
  <script>
    if (this !== window) {
        xtag.register(this, {
            lifecycle:{
                created: function() {
                    this.classList.add("red");
                    this.innerHTML = "This should be red but isn't when importing the document that this definition is in.";
                }
            }
        })
    }
  </script>
</element>

Then import that file using HTML Imports and create an x-foo, you should notice the text's colour.

Document overiding lifecycle callbacks in mixins and custom tags

If I define a lifecycle callback in a mixin, and then also in my registered tag, what happens? This should be documented.

Include a template polyfill

The documentation covers template elements which are very useful with x-tags but are not supported natively on the browsers x-tags otherwise covers. A polyfill should be included which works correctly with dynamically inserted templates and with HTML imports.

Wrong/old version of polyfill *still* being used on dist/master

We've managed to regress back to an old version for the polyfills somehow. The dist in X-Tag core, and presumably Brick, is pushing out old version of the polyfill that do not contain the latest changes that make the library work when it is added during the 'interactive' readyState: https://github.com/Polymer/CustomElements/blob/master/src/boot.js

That file is not being pulled in, and we need to know why we keep falling back to old builds of the polyfill.

[Q] How would you go about adding custom events using xtag.customevents?

I'm really not sure how to use the condition property; I've tried simply returning true, but that doesn't seem to work.

attributeChanged only fires when an attribute is changed using setAttribute();

Description:

When setting an attribute by [element].attr = "value"; attributeChanged() doesn't fire however when you set an attribute using [element].setAttribute("attr", "value");

Reproduction:

var foo = document.createElement("x-foo");
//attributeChanged doesn't fire:
foo.attr = "value";
//attributeChanged does fire:
foo.setAttribute("attr", "value");

Tested on commit 2adafbb

Possible Solution:

Use MutationObservers to observe any changes with Mutation Events as a fallback.

Update copy of x-tag-core in x-tag repo, x-tag in web-components-stub

I've recently had some issues with the the copies of x-tag,

• The bower command installs the latest version of x-tag.
• The dist in the x-tag repo is 4 months old.
• The copy in web-components-stub is 7 months old.

Updating latest blogpost on x-tag.org

The latest blog post that announces the use of polymer's web components polyfills, still says that there's the declarative way of registering new custom elements with the <element> element. As far as I know, <element> has been shelved.

However, polymer still provides the <polymer-element> which get ahead of the spec'd <element> element and will polyfill <element> when it returns, to register elements in a declarative way.

So what is it all about in x-tag? x-tag uses just Custom Elements, HTML Imports and HTML Template polyfills, so is the blog post probably just not up to date?

Licensing consistent with Brick

Hi, I had hoped when license was changed to Apache for Brick, it would be done here as well. Perhaps this has been overlooked. Can we have Apache 2 please consistently with this stack. mozbrick/brick#60 (comment)

website not working in IE 9 or IE 10

Even though x-tags claims to support IE 9 and up, its website doesn't work in IE 9 or IE 10. This makes it rather hard to see x-tags working in those browsers.

x-tag files using deprecated component.json file

Am getting this message when installing x-tag stuff:

bower warn Package x-tag-core is still using the deprecated "component.json" file

apparently component.json needs to be renamed to bower.json?

example of x-tags in repo

It'd be nice if there were some example showing x-tags in action in the repository, just for basic testing purposes. (especially as the website doesn't work in IE 9 and IE 10 at the moment, so I can't use that to test)

Document accessors.attribute property

As mentioned in #49 - it is desperately needed :-)

How to extend table elements

Would like to extend the 'td' table element but noticed it isn't behaving as expected.

Example:
http://jsfiddle.net/52ktx/3/

x-tags tests fail in IE 10

Even though x-tags says it supports IE 9 and up, I get plenty of test failures when I run the tests in IE 10.

removed() callbacks not honored when logFlags.dom is false

Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
  <head>
    <script src="https://raw.github.com/x-tag/core/master/dist/x-tag-core.min.js"></script>
  </head>
  <bpody>
    <x-tag>test</x-tag>
    <pre id="log"></pre>

    <script>
    logFlags.dom = true;

    // console.log gets mucked up by logFlags.dom, and alert() is unreliable
    var log = document.getElementById("log");
    xtag.register(
      'x-tag',
      {
        lifecycle: {
          created: function() {
            log.innerHTML += "created ";
          },
          removed: function() {
            log.innerHTML += "removed";
          }
        }
      }
    );
    setTimeout(function(){
      var test = document.getElementsByTagName('x-tag').item(0);
      test.parentNode.removeChild(test);
    },500);
    </script>
  </body>
</html>

Behaviour

When logFlags.dom is set to true, created removed is displayed in the pre. When it is unset or set to false, only "created " is displayed, i.e. the removed() callback is uncalled.

Explanation

In x-tags.js, removed() will not call removedCallback() if element.__inserted is negative. If logFlags.dom is turned off, then element.__inserted will be undefined, and set to -1 earlier in removed(). The only other place element.__inserted is referenced is in inserted(), which also does a check on logFlags.dom. Indeed, defining inserted: function(){} in the example above will give the correct behaviour even when logFlags.dom = false.

xtags event object not working

Demo: http://jsfiddle.net/samarthwiz/TfjxC/8/
When you click the text, the background colour should change to orange.

currentTarget of event listeners defined with xtag.addEvent throwing TypeError when triggered in Safari

In Safari, event listeners added by xtag.addEvent throw TypeError: Attempting to configurable attribute of unconfigurable property. when they are triggered.

Doing some digging into the source shows that this error is thrown in parseEvent when attempting to define the currentTarget property.

Test case to reproduce the error: event-bug.html

Tested on Safari 5.1.7 desktop with the distributed x-tag-core.js at f12a238

Availability of methods when using a custom element inside another custom element with innerHTML

Here's another "funny" question that "bit" me with the mini-synth example in audio-tags.

Simplified, I want to be able to use custom components inside custom components with innerHTML, but apparently I can't call their methods instantly.

In the mini synth I resorted to create the elements with document.createElement so that their methods would be there upon creation, but that kind of defeats the declarative goal, and I don't know if there's a better way.

Here's a simpler demo:

<component-b></component-b>

<script src="x-tag-core.min.js"></script>
<script>

    xtag.register('component-a', {
        lifecycle: {
            created: function() {
                this.innerHTML = 'Hi, from Component A';
            },
            methods: {
                someMethod: function() {
                    console.log('some method makes magic happen');
                }
            }
        }
    });

    xtag.register('component-b', {
        lifecycle: {
            created: function() {
                this.innerHTML = 'Component B has a <component-a></component-a>';
                var componentA = this.querySelector('component-a');
                componentA.someMethod();
            }
        }
    });

    window.addEventListener('DOMComponentsLoaded', function() {
        console.log('BAM');
    }, false);

</script>

The output should be "Component B has a Component A" but it breaks because someMethod is not available (?) by the time it is called.

Online: http://people.mozilla.org/~spenades/test_cases/xtag_tags_inside_tags/

Imports failing on IE9

Not sure if this is a bug in x-tag or HTMLImports.

When I try to import a custom element, the script int the import never runs, and the element never gets registered. I made a work-around.

(function () {
    var componentsReady = false,
        importsLoaded = false,
        _callback;

    window.addEventListener('WebComponentsReady', function () {
        componentsReady = true;
        done();
    });

    function done() {
        if (componentsReady && importsLoaded) {
            setTimeout(_callback, 1);
        }
    }

    FJ.XTag = {

        loadImports: function (callback) {
            _callback = callback;
            var imports = dom('link[rel=import]');
            var importDiv = dom.add("div", "", {style: "display:none"});
            var hrefs = [];

            for (var i = 0, maxi = imports.length; i < maxi; i++) {
                hrefs.push(imports[i].href);
            }

            FJ.Loader.load(hrefs, function (r1, r2) {
                importDiv.innerHTML += r1 + r2;
                importsLoaded = true;
            });
        }
    }
})();

It works, BUT... this causes another issue in IE10. When I try to register an element, x-tag-core says "Name argument must not be empty". If I set it to return instead of throw an error, everything seems to work fine.

support for 'is' attribute as described in web components intro

is that support is planned? Would like to author in HTML and use 'is' to hook x-tags into the document.

What is a proper/recommended way to handle touch events and gestures

I am working on a component mostly for mobile devices. It needs to respond to simple touch gestures such as drag and swipe. I looked at several existing components but could not find one that has special code for handling touch.

I am wondering if there are existing events that I could register a listener for, just like tapend:preventable:delegate(div) for example, to detect gestures.

e.currentTarget of custom events on xtag.register'd components always the last such component in the page

When we use xtag.register to register a custom component and give it event handlers for custom events like tapstart, tapend, or tap, e.currentTarget of any handlers for these events always refers to the last component in the page, instead of the component that the event occurred on.

For example, here are the files for a simple test case I set up to demonstrate the issue:

test.html
test.js

In this example, when I click Component A, the console logs should show Component A as the e.currentTarget of the events. However, while mousedown, mouseup, and click (ie: native events) correctly show this e.currentTarget, the custom tapstart, tapend, and tap events incorrectly show Component B.

For reference, this is using the distributed x-tag-core.js generated by building the repo as of af43ecc

Accessors / attributes dichotomy

Basically with native HTML elements properties and attributes are "kind of the same". But with x-tags there are property accessors and attributes. They go to different places. And it's confusing until you realise that (once again).

So for example if you have componentA, componentA.specialProperty is not the same as componentA.getAttribute('specialProperty');
Even more, componentA.specialProperty = 'something'wouldn't trigger attributeChanged, if defined.

But for native components (e.g. an input), input.value = 'something' and input.setAttribute('value') = 'something' is the same (or at least results in the same result).

Here's a long demo featuring unmet expectations: http://people.mozilla.org/~spenades/test_cases/xtags-attributes-accessors/
(be sure to check the console and the comments).

This is something that bugs me all the time. Not sure if we can do something about it--ideally attributes and accessors would be the same, or have the same effect.

attributeChanged not firing?

I'm not having much success getting the attributeChanged callback to fire. Any chance of pointing me to a working example?

On a side note, the downloadable ZIP package at http://http://www.x-tags.org/ currently contains js files with no content.

Kind regards,

Leonard

My test case:

<!DOCTYPE html><html><head></head>
<body>
<script type="text/javascript" src="/js/vendor/x-tag-core/x-tag-core.js"></script>
<script type="text/javascript">
xtag.register('test', {
    'lifecycle': {
        created: function(){
            console.log('created');
        },
        inserted: function(){
          console.log('inserted');
        },
        removed: function(){
          console.log('removed');
        },
        attributeChanged: function(){
          console.log('attributeChanged');
        }
    }
});

var element = document.createElement('test');           // Should log "created"
var body = document.getElementsByTagName('body')[0];

window.setTimeout(function(){

    body.appendChild(element); // Should log "inserted"

    window.setTimeout(function(){

        element.setAttribute('test', 'value') // ERROR: Should log "attributeChanged"

        window.setTimeout(function(){

            body.removeChild(element) // Should log "removed"

        }, 1000)
    }, 1000)
},1000)
</script>
</body>
</html>

lifecycle.removed invocation

Hey guys;)

It would be useful to provide the former parentNode of the element in the removed lifecycle method.

E.g. when a slide of a slidebox is removed the slidebox can be requested to slide automatically to the next one...
Because this.parentNode is undefined in the function, there's no instance to the former parentNode.

Possible solution:

1. Pass the former parentNode to the removed method. (recommended)
2. Attach the former parentNode to the element as a property and remove it afterwards...

What do you think??

How does x-tag polyfill use shadow DOM and HTML templates?

x-tag home page "panel" description text

I don't know where else to put this issue; it's not a problem with the code. The home page (x-tags.org) in the "Razzle Dazzle" section has examples for "panel" and "modal"; both share the same description (and it's for "modal", not "panel").

Close this if it's too silly.

attributeChanged doesn't fire when tag is registered

I'm wondering if it would make sense to have the attributeChanged method fire when tags are registered. Otherwise I would need to handle attributes being set in two places (created and attributeChanged). Not a huge issue, but it seems like a redundancy that could be avoided.

Thoughts?

[Q]How does the prototype property work?

I'm not sure how the prototype property works?
Can I pass a HTMLElement's prototype into this? Is it for other xtag objects(the ones you pass in xtag.register)?