How do I get emmet to add an attribute with a value into a div tag?

Question

I am using the emmet.vim plugin.

How do you write emmet shorthand to account for attributes with no values?

This is what I write:

div.contain-to-grid.sticky>nav.topbar[data-topbar]

This is what I want to happen:

<div class="contain-to-grid sticky">
  <nav class="topbar" data-topbar></nav>
</div>

This is what I get:

<div class="contain-to-grid sticky">
  <nav class="topbar" data-topbar=""></nav>
</div>

Instead of creating an attribute without a value:

data-topbar

it is creating an empty value:

data-topbar=""

Is there a work around for this? If not then I can live with it. It would be nice to know if it can be done. Thanks

Doze

While the documentation does not seem to reflect it, this closed issue indicates that support for boolean attributes has been added to Emmet with the syntax of div[my-attribute.], which should expand to <div my-attribute></div>. This worked for me in Sublime Text. – Hamlani

Answer 1

The behaviour of Emmet-vim was changed to be as expected from documentation:

You don’t have to specify attribute values: td[colspan title] will produce <td colspan="" title=""> with tabstops inside each empty attribute (if your editor supports them).

So no. You can follow this request here: Attributes without values not being expanded.

Possible crude workaround could be to change the line 220 in autoload/emmet/lang/html.vim from

let current.attr[atts] = ''

to

let current.attr[atts] = function('emmet#types#true')

Roemer

Okay. That is good enough for me. Emmet saves enough time for me without this ability. thanks! – Doze

While the documentation does not seem to reflect it, this closed issue indicates that support for boolean attributes has been added to Emmet with the syntax of div[my-attribute.], which should expand to <div my-attribute></div>. This worked for me in Sublime Text. – Hamlani

Answer 2

I just copy the comment by @Alexander Nied to make it more noticeable, which says

While the documentation does not seem to reflect it, this closed issue indicates that support for boolean attributes has been added to Emmet with the syntax of div[my-attribute.], which should expand to This worked for me in Sublime Text

this work for me too, in Intellij idea

Aunt

Answer 3

As of today (Feb 17, 2023), you can expand foo[bar.] into <foo bar></foo>

So,

div.contain-to-grid.sticky>nav.topbar[data-topbar.]

will be expanded to

<div class="contain-to-grid sticky">
    <nav class="topbar" data-topbar></nav>
</div>

Chingchinghai