Skip to content

lvt-fx:highlight directive should remove empty style attribute after cleanup #100

Description

@adnaan

Description

After lvt-fx:highlight="flash" completes its cycle (50ms delay + duration), the directive sets style.backgroundColor = "" and style.transition = "", which removes the inline declarations but leaves the style="" attribute on the element.

lvt-fx:animate already handles this case correctly (directives.ts:230-232):

htmlElement.style.removeProperty("animation");
if (htmlElement.style.length === 0) {
  htmlElement.removeAttribute("style");
}

The highlight branch (directives.ts:185-189) should mirror that pattern after the inner setTimeout fires.

Reproduction

Apply lvt-fx:highlight="flash" to any element. After the highlight cycle (≈550ms), inspect the element — it has style="" lingering.

Impact

Minor. Cosmetic for visual rendering (an empty style attribute is a no-op for CSS) but noticeable for:

  • Strict-CSP test validators that flag [style] regardless of content (e.g., lvt/testing/chrome.go:967 runUIStandards and ValidatePicoCSS).
  • Code that uses CSS [style] selectors expecting only meaningful styles.

The livetemplate/examples Session 5 Highlight on Change pattern works around this by intentionally skipping UI_Standards for that page (the pattern's whole premise is inline styling, so the rule isn't a meaningful guarantee). Mirroring animate's cleanup would let highlight pages opt back into the standard subtest pair.

Proposed Fix

In dom/directives.ts applyFxEffect highlight branch, after the inner setTimeout sets style.transition = originalTransition:

if (htmlElement.style.length === 0) {
  htmlElement.removeAttribute("style");
}

🤖 Generated with Claude Code

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions