HTML style attribute inconsistency

[ctjhoa]

Hi,

I found an inconsistent behavior depending on ember versions and ember-angle-bracket-invocation-polyfill.

Here is my ember-angle-bracket-invocation-polyfill version: 2.0.1 (but I reproduce the same issue in 1.3.1)

With classic component declaration:

{{test-me style="color: red" }}

In Ember 2.18.2: the style attribute doesn't exist in the final DOM. In Ember 3.4.4: the style attribute doesn't exist in the final DOM.

If I try this:

<TestMe style="color: red" />

In Ember 2.18.2: the style attribute doesn't exist in the final DOM. In Ember 3.4.4: the style attribute exist in the final DOM.

IMO the expected behavior is that style attribute should be transferred to the final HTML node as style isn't prefixed with @.

If I try with another attribute than style (like data-foobar="foobar") it is transferred to the final HTML node as expected regarding the Ember versions

[ctjhoa]

After further investigation it appears on Ember versions < 3.1

[ctjhoa]

I've created a PR which add my test case (feel free to close it). Here are ember try:each results:

------ RESULTS ------

Scenario ember-lts-2.12: SUCCESS
Command run: ember test
┌────────────────────┬────────────────────┬──────────────────────────────┬──────────┐
│ Dependency         │ Expected           │ Used                         │ Type     │
├────────────────────┼────────────────────┼──────────────────────────────┼──────────┤
│ ember-source       │ ~2.12.0            │ 2.12.2                       │ yarn     │
└────────────────────┴────────────────────┴──────────────────────────────┴──────────┘

Scenario ember-lts-2.16: FAIL
Command run: ember test
┌────────────────────┬────────────────────┬──────────────────────────────┬──────────┐
│ Dependency         │ Expected           │ Used                         │ Type     │
├────────────────────┼────────────────────┼──────────────────────────────┼──────────┤
│ ember-source       │ ~2.16.0            │ 2.16.4                       │ yarn     │
└────────────────────┴────────────────────┴──────────────────────────────┴──────────┘

Scenario ember-lts-2.18: FAIL
Command run: ember test
┌────────────────────┬────────────────────┬──────────────────────────────┬──────────┐
│ Dependency         │ Expected           │ Used                         │ Type     │
├────────────────────┼────────────────────┼──────────────────────────────┼──────────┤
│ ember-source       │ ~2.18.0            │ 2.18.2                       │ yarn     │
└────────────────────┴────────────────────┴──────────────────────────────┴──────────┘

Scenario ember-3.1: SUCCESS
Command run: ember test
┌────────────────────┬────────────────────┬──────────────────────────────┬──────────┐
│ Dependency         │ Expected           │ Used                         │ Type     │
├────────────────────┼────────────────────┼──────────────────────────────┼──────────┤
│ ember-source       │ ~3.1.0             │ 3.1.4                        │ yarn     │
└────────────────────┴────────────────────┴──────────────────────────────┴──────────┘

Scenario ember-3.2: SUCCESS
Command run: ember test
┌────────────────────┬────────────────────┬──────────────────────────────┬──────────┐
│ Dependency         │ Expected           │ Used                         │ Type     │
├────────────────────┼────────────────────┼──────────────────────────────┼──────────┤
│ ember-source       │ ~3.2.0             │ 3.2.2                        │ yarn     │
└────────────────────┴────────────────────┴──────────────────────────────┴──────────┘

Scenario ember-3.3: SUCCESS
Command run: ember test
┌────────────────────┬────────────────────┬──────────────────────────────┬──────────┐
│ Dependency         │ Expected           │ Used                         │ Type     │
├────────────────────┼────────────────────┼──────────────────────────────┼──────────┤
│ ember-source       │ ~3.3.0             │ 3.3.2                        │ yarn     │
└────────────────────┴────────────────────┴──────────────────────────────┴──────────┘

Scenario ember-lts-3.4: SUCCESS
Command run: ember test
┌────────────────────┬────────────────────┬──────────────────────────────┬──────────┐
│ Dependency         │ Expected           │ Used                         │ Type     │
├────────────────────┼────────────────────┼──────────────────────────────┼──────────┤
│ ember-source       │ ~3.4.0             │ 3.4.8                        │ yarn     │
└────────────────────┴────────────────────┴──────────────────────────────┴──────────┘

Scenario ember-lts-3.8: SUCCESS
Command run: ember test
┌────────────────────┬────────────────────┬──────────────────────────────┬──────────┐
│ Dependency         │ Expected           │ Used                         │ Type     │
├────────────────────┼────────────────────┼──────────────────────────────┼──────────┤
│ ember-source       │ ~3.8.0             │ 3.8.3                        │ yarn     │
└────────────────────┴────────────────────┴──────────────────────────────┴──────────┘

Scenario ember-release: SUCCESS
Command run: ember test
┌────────────────────┬────────────────────┬──────────────────────────────┬──────────┐
│ Dependency         │ Expected           │ Used                         │ Type     │
├────────────────────┼────────────────────┼──────────────────────────────┼──────────┤
│ ember-source       │ https://s3.amazon… │ 3.11.1-release+c0871674      │ yarn     │
└────────────────────┴────────────────────┴──────────────────────────────┴──────────┘

Scenario ember-beta: SUCCESS
Command run: ember test
┌────────────────────┬────────────────────┬──────────────────────────────┬──────────┐
│ Dependency         │ Expected           │ Used                         │ Type     │
├────────────────────┼────────────────────┼──────────────────────────────┼──────────┤
│ ember-source       │ https://s3.amazon… │ 3.12.0-beta.1.beta+60c79793  │ yarn     │
└────────────────────┴────────────────────┴──────────────────────────────┴──────────┘

Scenario ember-canary: SUCCESS
Command run: ember test
┌────────────────────┬────────────────────┬──────────────────────────────┬──────────┐
│ Dependency         │ Expected           │ Used                         │ Type     │
├────────────────────┼────────────────────┼──────────────────────────────┼──────────┤
│ ember-source       │ https://s3.amazon… │ 3.13.0-canary+a1b5a6b6       │ yarn     │
└────────────────────┴────────────────────┴──────────────────────────────┴──────────┘

Scenario ember-default: SUCCESS
Command run: ember test

2 scenarios failed
10 scenarios succeeded
12 scenarios run
ember try:each  198.56s user 33.77s system 58% cpu 6:35.87 total

[rwjblue]

Just wanted to point out that the two invocations are actually different:

If your classic component (curly) invocation was:

{{test-me style="color: red" }}

Then your angle bracket invocation should be:

<TestMe @style="color: red" />

But in your original description you mentioned that you used <TestMe style="color: red" />.

[ctjhoa]

@rwjblue yes it was just to give an output comparison but invocations are different. Do you have any hint where to start to look at to contribute to the polyfill?