Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

itemscope are removed from markup #8413

Closed
torbs opened this issue Mar 23, 2023 · 4 comments
Closed

itemscope are removed from markup #8413

torbs opened this issue Mar 23, 2023 · 4 comments

Comments

@torbs
Copy link

torbs commented Mar 23, 2023

Describe the bug

When createing a div element with the attribute itemscope, the attribute itemscope is removed from markup and only available as a property. Itemscope as an attrbute is necessary for microdata to work properly. Itemscope is a standard html attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemscope

Reproduction

In repl. Set the attribute itemscope on the h1-element. Inspect the markup and the attribute is removed.

// I stored the element in the variable element
console.log(el.itemscope); // true
console.log(el.getAttribute('itemscope')); // null

We can expand the test to recreate the bug:

assert.ok(div.getAttribute('itemscope'));

Logs

No response

System Info

Chrome Version 111.0.5563.64 (Official Build) (x86_64)
Svelte compiler version 3.57.0

Severity

blocking all usage of svelte

@varl
Copy link

varl commented Mar 23, 2023

We are also seeing different behaviours across Firefox (111.0 (64-bit)) and Chromium (Version 111.0.5563.64 (Official Build) Arch Linux (64-bit)).

Chrome:

inert appears in dom

2023-03-23-130020_1980x1010_scrot

itemscope does not appear in dom

2023-03-23-130007_1980x1010_scrot

Firefox

inert does not appear in dom

2023-03-23-130151_1980x1010_scrot

itemscope does not appear in dom

2023-03-23-130136_1980x1010_scrot

The AST looks the same in all cases. Not sure if this is a red herring but something noticed during debugging.

@varl
Copy link

varl commented Mar 23, 2023

This works as a workaround (in the repl):

<script>
    import { onMount } from 'svelte'
    import {
        attr,
        element
    } from "svelte/internal";

    let h1 = element('h1')
    let name = 'world';
    onMount(() => attr(h1, 'itemscope', 'true'))
</script>

<h1 bind:this={h1} >Hello {name}!</h1>

Using plain JavaScript to accomplish the same thing also works, but the onMount can be omitted.

2023-03-23-153655_1980x1010_scrot

@aMediocreDad
Copy link
Contributor

aMediocreDad commented Mar 24, 2023

Both of these attributes are set, except as foreign attributes (e.g. itemscope=""), in v3.55.1

This is the specific commit that adds these attributes as boolean_attributes: https://github.com/sveltejs/svelte/pull/7944/files

It seems? Svelte relies on the browser to set these as attributes when the attributes are declared as properties of the element. This could explain the discrepancy between engines with the inert attribute (since it is not supported in FireFox).

Edit: Morning walk cleared it up. Ref: #8414

@torbs torbs changed the title itemscope (and custom attributes are removed from markup) itemscope are removed from markup Mar 24, 2023
@Conduitry
Copy link
Member

This should be fixed in 3.58.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants