Skip to content

Allow attributes on the <title> element #5198

Open
@romaricpascal

Description

@romaricpascal

Is your feature request related to a problem? Please describe.
Looks like the <title> element is [barred from having any attributes] (https://github.com/sveltejs/svelte/blob/master/src/compiler/compile/nodes/Title.ts). According to MDN, it can host any global attribute. It was a bit of a surprise that it had special treatment.

This prevents adding to it an aria-live attribute that would allow its announcement by assistive technology (provided it's unhidden from the accessibility tree, see experiment there: https://romaricpascal.is/posts/title-element-aria-live/).

Describe the solution you'd like
At the moment, it looks like the attribute can be set through an onMount() call:

  onMount(() => {
    document.head.querySelector('title').setAttribute('aria-live', 'assertive');
  });

but it'd be great to just be able to do:

<svelte:head>
  <title aria-live="assertive">{$title}</title>
</svelte:head>

This would also make updating whether the title should be announced lighter, especially if the value comes from a store:

<svelte:head>
  <title aria-live={$live}>{$title}</title>
</svelte:head>

Describe alternatives you've considered
Using onMount provides a workable workaround. There's just a bit of logistics if attributes need to come from a store or multiple attributes need setting (but in my use-case, that would only be aria-live).

How important is this feature to you?
It's not a dealbreaker that it's not there. It just feels less idiomatic to have all that boilerplate around. It was also confusing to have that specific tag not work as a regular tag (maybe it's a matter of documentation, though).

Activity

caroso1222

caroso1222 commented on Jul 24, 2020

@caroso1222
Contributor

I've never seen such a pattern before but, as you point out, it seems to be valid HTML. That change was introduced in this PR but there's no apparent reason as to why. I can open a PR removing that but I'm afraid I'm missing something here.

umanghome

umanghome commented on Jul 31, 2020

@umanghome
Contributor

It makes sense to remove the validation since the spec allows global attributes. https://html.spec.whatwg.org/#the-title-element

caroso1222

caroso1222 commented on Aug 1, 2020

@caroso1222
Contributor

I talked about this on Discord and it seems like the maintainers are not willing to remove the validation. The argument being that the article posted by op is an experiment more than good practice. I too consider the validation to be irrelevant given that it should be allowed, according to the spec.

stale

stale commented on Dec 24, 2021

@stale

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

added this to the 5.0 milestone on Apr 2, 2024
modified the milestones: 5.0, 5.x on May 13, 2024

2 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

      Development

      Participants

      @jschaf@romaricpascal@Rich-Harris@mindrones@caroso1222

      Issue actions

        Allow attributes on the `<title>` element · Issue #5198 · sveltejs/svelte