declarative-custom-element v0.0.2
custom-element
Native declarative way to create a custom webcomponent
Since Polymer shadowdom polyfill causes some issues with other libraries (notable with MooTools) I decided to create this clone of the polymer-element element that doesn't use the shadow dom part.
custom-element follows a native approach so it's not dependant on any framework to work, so any component built with it will work with both Polymer or X-Tag but it can also be used as standalone just by including only a Custom Elements polyfill like the Polymer one or @WebReflection one , and it will work natively in browsers which supports the document.registerElement method such as Google Chrome Canary
What's similar to polymer-element
custom-elementwill look for the firsttemplateelement inside the component and it will clone its content and attach it to its body- the prototype registration can be done anywhere, even in a different script
- if you don't need to register any prototype you can use the
noscriptattribute - it can extend an existing element using
extend - it can publish a constructor using the
constructorattribute - you can publish some attributes using the
attributesattribute - you can use the
contenttag insidetemplateto define where your element content will appear - you can listen to the {propertyName}Changed event.
- you can listen to the
readyevent. - you can listen to the
createdevent.
also from the Custom Element Polyfill
- you can listen to the
attributeChangedCallbackevent. - you can listen to the
attachedCallbackevent. - you can listen to the
detachedCallbackevent.
Differences with Polymer-Element
The biggest change is that
custom-elementdo not use shadow dom, since the polyfill was causing some issues with MooTools. This change will make the component simpler to theme also since all the subtree is exposed now.Instead of calling
Polymeryou will calldocument.register.taginstead, the syntax is the samethe $ shortcut will map using
data-idinstead of theid, since otherwise there will possibly be duplicatesidin the page.it doesn't support publishing attributes via the published options
- if no
contentelement is provided in thetemplateelement, the content will still be appended after thetemplatecontents
Work in progress. Alpha version. Don't try this at home. No Cats has been harmed during the writing of this clone.
11 years ago