As a first documentation test, we should at least note and document public api.

The code seems to have some strange behavior related to cancelBubble in the event handlers.

For example if I have two functions listening to the same event on the same target and the first one calls event.stopPropagation() the second one should still be called.

I don't understand what the intent is by checking cancelBubble. Did you mean to check defaultPrevented?

We're exploring the use of toolkit in our Closure-compiled application. It'd be great if the project maintained externs that would work with Closure compiler.

https://developers.google.com/closure/compiler/docs/api-tutorial3#externs

The clone url for the git repository on the project page is incorrect.

Currently it is git clone git://github.com/toolkitchen/toolkitchensink.git --recursive

it should be git clone https://github.com/toolkitchen/toolkit.git --recursive

in shimStyling.js:pseudoScopeRules it tries to change the selector using CSSStyleRule.selectorText but selectorText is readonly in FF.

https://developer.mozilla.org/en-US/docs/DOM/CSSStyleRule/selectorText

... depending on implementation of Custom Elements

var m = new Meme();
TypeError: Object # has no method 'instantiate'

This might be expected behavior, but I'll report it anyway.

When using title as attribute to a component, very strange things happen. First it appears to function ok, but after 10-20 seconds the title resets to the default value. In the example below the component renders "An Event" as title at first. Then randomly it changes to "No Title".

My example markup:

<gantt-chart-event start="1365120000" end="1365984000" title="An Event"></gantt-chart-event>

Component code:

Toolkit.register(this, {
   title: 'No title'
 });

e.g. troublesome cases:

<x-foo bar="">
<x-foo bar="true">
<x-foo bar="false">
<x-foo bar="0">
...

Note: I am unable to reproduce this in a smaller test case

In the youtube sample application, running under ShadowDOM Polyfill, if a video is selected from the list, the upper left button in the video panel does not respond to clicks.

It appears that setting the video title causes the events to no longer have to correct target.
Setting the video title causes MDV to create a text node in the toolbar, which appears to cause the Shadow DOM Polyfill to redistribute nodes incorrectly.

The easiest way to reproduce this is with the following snippet:

$('.title').appendChild(document.createTextNode('event killer'));

It's valid to declare a component like this:

< button is="icon-button" >

The CustomDOMElements polyfill currently does not identify these elements properly so they are not upgraded.

The nodes in a component's shadowDOM should be set to have the local model of the component. This causes a problem when using shim shadowDOM since in this case model is inherited via the composed dom and not the local dom, as desired.

Originally from: https://github.com/toolkitchen/polyfills/issues/68

This is normally just done by traversing up parentNode's, but in the shim, a node is in multiple trees. So it's necessary to find the proper tree given a composed node. The link between a composed node and its representation in a shadow-root can be lost because we use one property to track the alternate tree in which the composed node exists and it may exist in more than one alternate tree.

I believe this is what g-component::findController has to do, look there.

An element might want to bind one if its properties to its style or class attribute, for example. Currently, it's necessary to put a node in the element's shadowDOM to achieve this kind of effect.

A component currently does not inherit properties published via a published block in an extendee.

if I have a custom component with an attribute foo="" that I publish and use {{foo}} in my component, I get "true" instead of the empty string.

Then I tried   and it gave "NaN" and got much slower. Dimitri said this second issue may already be fixed in WebKit.

I haven't thought about this much, so this may be wrong-headed, but my knee-jerk reaction is that the usage shown by the overlay.html workbench file is too complicated.

It would be nice if g-overlay had some defaults such that when declared simply it produces pleasing output.

I don't mean that the workbench file (overlay.html) should be trivial, because that goes against how we have defined files in that folder, but I would like to be able to make a trivial usage that still looks good.

We may be bumping up against theming issues here.

Originally from: https://github.com/toolkitchen/polyfills/issues/82

When using <script shadow="shim">, accessing this.node.webkitShadowRoot in the custom element should return a reference it's ShadowRoot.

https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#shadow-aware-attributes

See the example here: workbench/icon-button.html?debug&shadow=polyfill

There are 3 icon-buttons, but only one has the expected image.

This breakage was caused when MDV's creation hook was implemented in the platform repo to upgrade elements (https://github.com/toolkitchen/platform/blob/master/lib/patches-loaded.js#L10).

The expected behavior is that icon-button's src property is bound to icon's src property and that is bound to a div with its style attribute set to "background-image: url({{src}}) ...".

When stepping through the ShadowDOM polyfill code here https://github.com/toolkitchen/ShadowDOM/blob/master/src/wrappers/Element.js#L41, the last call to setAttribute has the expected value and the wrapped node's style attribute has the expected value. This call is a result of the dirtyCheck called when the "WebComponentsReady" event is fired.

At that time, the real node in question is not in document. It is in a document fragment owned by a document without a defaultView. The url is resolve at that time and evaluates to an unexpected value.

We can avoid this problem by ensuring we do not dirtyCheck before shadowDOM distribution occurs. More generally, MDV could, perhaps, avoid processing bindings on nodes without a browsing context.

Absolute urls are handled incorrectly. If a component contains:

<link rel="components" href="/static/libs/toolkit/src/g-component.html">

urlToPath() resolves the url to:

http://localhost/static/webcomponents/demos/components/my-components//static/libs/toolkit/src/g-component.html

So the xhr fails.

Note: the URL should be http://localhost/static/libs/toolkit/src/g-component.html

Screen shot from Firefox 20 OS X:

Minor discrepancy between code and comments: I was trying to get the various polyfill members exposed as a global by following the comments in platform.js, which indicate that you can do

<script src="platform.js" export=myglobal></script>

However, the actual flag is actually "exportas", not "export". (I wasn't sure whether the code or the comment should be fixed.)

Originally from: https://github.com/toolkitchen/polyfills/issues/85

For example:

<style>
div {
background: url('data:...');
}
</style>

The cssText is being rewritten to url('http://localhost:8000/data:...');

Culprit is makeCssUrlsRelative():
https://github.com/toolkitchen/polyfills/blob/master/Components/CustomDOMElement/HTMLElementElement.js#L184

Trying to use the min file in the docs, I get:

Toolkit.shimStyling() appears to be missing from the stable branch's minified version.

Because of upper bound encapsulation, event listeners installed on a component will get the component itself as the event target when an event is generated within its shadowDom. This is unfortunate since a component knows about its own shadowDom and should be able to get this target info.

For example, in g-ratings, it would be convenient to install a listener on the component and interrogate event.target to figure out which star was pressed. We cannot do so because the element node always has event.target set to itself.

We could address this by listening for events on the element's shadowRoot. This would, however, mean that events are relevant to a particular shadowRoot.

A component that inherits styles from a base component doesn't appear to pick up the @host rules defined by its base component(s). The following sample demonstrates the issue:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Subclass styling</title>
<script src="platform/platform.js"></script>

<element name="base-element">
    <link rel="components" href="components/g-component.html">
    <template>
        <style>
        @host {
            color: red;
        }
        </style>
        <content></content>
    </template>
</element>

<element name="sub-element" extends="base-element">
    <link rel="components" href="components/g-component.html">
    <template>
        <style>
        @host {
            font-weight: bold;
        }
        </style>
        <shadow></shadow>
    </template>
</element>

</head>

<body>
    <base-element>
        I'm red
    </base-element>
    <sub-element>
        I should be red and bold
    </sub-element>
</body>

</html>

The instance of the does have the styles within processed such that "@host" is replaced with "sub-element". However, the styles of the base component, are injected as is, without "@host" processing. So the that wants to be both red and bold ends up being just bold.

http://travis-ci.org/

http://ci.testling.com/

See: labs/inspector/: the inputs in the property editor

See: projects/youtube: the search input (top, left). In addition to jumping to the end, the input blurs.

reduction: issues/pending/mdv-repeat-binding

I cannot make an attribute binding to an object on an element instantiated by mdv, ie.,

The obj properties of x-foo are the stringified objects, not the actual object.

Component property automation should be executed once per HTMLElementElement (definition) and not per-instance.

Run this workbench file under ShadowDom Polyfill: workbench/menu-button.html?shadow=polyfill. This should hang Chrome.

Note that this page has somewhat complicated ShadowDOM distribution. It looks like putting a custom element with shadowDOM into a g-menu-button is enough to cause the problem.

Attributes are mapped to properties at instantiation time only.

We are considering if this should be done dynamically, aka when setAttribute is called.

Placing on-eventName="eventNameHandler" on an element in a shadowRoot should call an eventNameHandler method on the host node. This does not occur if the element on which the on- attribute occurs is itself inside a custom component, e.g.

<template>
  <g-foo>
    <button on-click="clickHandler">

...

Right now, setting up instance attributes has to be done in readyCallback. Many elements have to do this for things like touch-action attribute (for PointerEvents).

Can we set up a way to do this declaratively?

Originally from: https://github.com/toolkitchen/polyfills/issues/84

Having this in a custom element, still gets parsed:

/*@host { border: 1px solid red; }*/

Presumably because the regex code still catches it:
https://github.com/toolkitchen/polyfills/blob/master/Components/CustomDOMElement/HTMLElementElement.js#L273

The following doesn't work:

<element name="x-foo">
  <template>
    <div>
      <template iterate="items">
        <div>item{{}}</div>
      </template>
    </div>
  </template>
  <script>
    Toolkit.register(this, {
      ready: function() {
        this.items = [1, 2, 3];
      }
    });
  </script>
</element>

I'm getting "Uncaught ReferenceError: SideTable is not defined" when loading toolkit @6113f48a9e5910135ac9fa54cd81adf0e897ba94

For example, how do you deal with ::-webkit-distributed under polyfill?

What about toolkit-scope="global" etc.

Because of the workaround for toolkitchen/ShadowDOM#27, any toolkit component with a property named "node" will cause bindNodeModel in bindMDV to fail.

Particularly bad is if node = ancestor of element being processed, which will cause an infinite loop.

Can we use names that describe what the property/function does?

Test: http://jsfiddle.net/fC3H9/4/

Using Chrome, increment the day until it rolls over. Something in the data binding
layer causes the input to be invalid when the day rolls over.

When using the shadowDOM shim, styles defined in component templates are leaked outside the component e.g.

< element ... >
< template >
< style >
button {
background: red;
}
...

This will style all buttons rather than buttons inside the element. When scoped stylesheets are used, this behavior is mostly mitigated. When scoped stylesheets are not supported, we can polyfill basic support by modifying rules to be scoped to the element.

Originally from: https://github.com/toolkitchen/polyfills/issues/86

The shim treats @host as a pseduo element. Namely, the following example applies
a red border to the host, which changes to a blue one on hover:

<style>
@host {
 border: 1px solid red;
}
@host:hover {
   border: 1px solid blue;
}
<style>

But the @host at-rule is like a @media query. The example above should be written as:

<style>
@host {
  * {
   border: 1px solid red;
  }
  *:hover {
   border: 1px solid blue;
  }
}
<style>

The toolkit, shim, and examples use the first syntax everywhere. Is that intentional or am I out of whack here?