HTML5 boolean attribute on a component

I need to add an HTML5 boolean attribute to a component. Here’s the Handlebars syntax.

{{#my-component data-test-my-component}}
{{/my-component}}

However, in Emblem.js this doesn’t seem possible. Here’s a few variations I’ve tried:

= my-component data-test-my-component [
  some-other-attr='']

= my-component [
  data-test-my-component
  some-other-attr='' ]

Does Emblem.js support this?

[kketch]

Hey @divmgl the only way to have that “data-” boolean attribute on the root element of your component is to use attributeBindings. And this is not related to emblem, the same is true with handlebars.

As explained in issue #120 the div attribute-name=true syntax allows you to render boolean html attributes.

But in the example you gave initially, data-test-my-component is expected to be the value for a positional parameter, see: https://guides.emberjs.com/v2.16.0/components/passing-properties-to-a-component/#toc_positional-params

So it won’t be bound to a html attribute, Ember will rather look for a data-test-my-component property on your rendering context (component, controller) and pass the value of that property as the value for positional parameter, which isn’t what you want.

And regarding emblem and positional params the only way to use them is to use the regular inline syntax for attributes (no brackets).

[thec0keman]

Emblem does support position params inside blocks:

= foo-bar [
  'hi!'
  baz=1
]

=> example => test