Instead of making all the built in attributes be global we match them to the
elements they actually apply to. I also removed a bunch of attributes that no
longer work in Sky (but haven't been removed from HTMLAttributeNames.in) yet,
or which we plan to remove.
I also removed the title property from HTMLElement. The <sky-box> widget forgot
to declare its title attribute and no error was generated because of the title
property existing on all elements. Sky doesn't have this so lets remove the API
now and clean up the C++ later.
R=ojan@chromium.org
Review URL: https://codereview.chromium.org/807243003
We now have an element-registry.sky module that exposes API to register
elements with attributes and event handlers. Right now it's an API on
the module itself, eventually the module will export an ElementRegistry
object since we'll need one per module once the custom element registry
is one per module.
R=abarth@chromium.org, ojan@chromium.org
Review URL: https://codereview.chromium.org/856693002
All reflected attributes two way bind on SkyElement, so now doing
<sky-element name="sky-input" attributes="value:string"> is enough
to get two way binding on the value attribute so users doing
<sky-input value="{{ inputValue }}"> will get the inputValue property
updated as the user types.
R=abarth@chromium.org, ojan@chromium.org
Review URL: https://codereview.chromium.org/850383002
Now instead of calling addEventListener inside the created() callback you just
add on-{eventName} attributes to the <sky-element> around your element
definition. The attribute defines what method on your element to call when the
event with {eventName} is dispatched through your element.
Implementing this required refactoring how sky-element.sky stored information
from each registered element. Now instead of storing just a map of templates
we store a map of ElementRegistration objects which have metadata about the
element. Future patches will combine this system with the element registration
system in sky-binder.
R=ojan@chromium.org
Review URL: https://codereview.chromium.org/845283003
Log an error whenever an element has an unknown attribute in a template.
This means you can't use generic attributes like Polymer, but we
probably want to discourage that anyway since attribute selectors should
be avoided for most things.
R=ojan@chromium.org
Review URL: https://codereview.chromium.org/845523004
Now you can use the attributes attribute on <sky-element> that
accepts a set of name:type comma separated pairs to control
the reflected attributes. ex. attributes="size:number"
Each attribute creates a getter and a setter on the element that returns
the correct type and will coerce the string attribute values into the
right type. It also correctly hooks into the data binding system.
A new callback is added: {name}Changed(oldValue, newValue) which will
be invoked whenever the attribute with that name changes and gets the
correctly coerced type values. See the <sky-radio> or <sky-checkbox>
widgets for examples of using the new callback.
Number attributes default to 0, booleans to false, and strings to empty
string. There is no way provided to set a different default, for that you
can use hasAttribute in the created callback to conditionally set a value.
Don't just assign the property there otherwise you'll overwrite the value
from the parser.
Another behavior change from making this work is that now attributeChanged()
is called for each attribute, even when the element is created by the
parser.
Overall this allows a nice simplification to the <sky-button>,
<sky-radio> and <sky-checkbox> widgets.
R=abarth@chromium.org
Review URL: https://codereview.chromium.org/836923002
SkyBinder is a rewrite of TemplateBinding.sky that uses classes and weak maps
and doesn't add expandos to any of the DOM objects.
It has a few differences from TemplateBinding.sky:
- null doesn't create instances in repeats.
- One time bindings are removed ([[ expr ]]), we'll add them back later.
- The bind attribute is removed.
The system is also less generic and is specialized to be used when
creating SkyElement instances.
The commit history that created SkyBinder can be found at:
https://github.com/esprehn/sky-binder/commits/masterTBR=ojan@chromium.org
Review URL: https://codereview.chromium.org/821353003
Now inside the <template> of a SkyElement you can use
on-eventName="method" on any element to add event listeners.
For example you can write <sky-button on-click="handleClick">
and then define handleClick(event) on the element class that
contains the button.
In adding this and tests I also realized that property bindings
were not setup on the initial call to bind(), which is now
fixed in this patch (See change to Node.prototype.bind).
R=eseidel@google.com, rafaelw@chromium.org
Review URL: https://codereview.chromium.org/812713005
The syntax for implementing a SkyElement is now:
<sky-element name="element-name">
<template>
<!-- template here -->
</template>
<script>
module.exports = class extends SkyElement {
attached() {
// ...
}
// .. methods here ..
}.register();
</script>
</sky-element>
The register() static method on SkyElement subclasses calls
document.registerElement() and returns the generated constructor.
It uses the parent <sky-element>'s name attribute to set the name
of the element.
R=rafaelw@chromium.org
Review URL: https://codereview.chromium.org/788943003
- Don't stamp the template repeatedly when attaching.
- Don't use __proto__
- Store the template in an external map instead of a property on the prototype.
- Add a created() callback.
- Allow creating a SkyElement with no associated <template> or ShadowRoot.
R=rafaelw@chromium.org
Review URL: https://codereview.chromium.org/715203002
Expose a Document constructor instead. This also exposes that
the TemplateBinding library might need more control over the
registration context for custom elements. For now we make all
documents share the same registration context.
R=ojan@chromium.org, abarth@chromium.org
Review URL: https://codereview.chromium.org/697363002
