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.

Sign up for GitHub

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

Jump to bottom

Differences in rendering .mjs files vs .html files #123

Open
sjorsrijsdam opened this issue Jul 31, 2024 · 0 comments
Open

Differences in rendering .mjs files vs .html files #123

sjorsrijsdam opened this issue Jul 31, 2024 · 0 comments

Comments

@sjorsrijsdam
Copy link

Rendering a page from an .html files results in a different HTML output than rendering a page from an .mjs template file with that doesn't use the store.

Problem

The problem is that this makes for an inconsistent author experience and complicates page level styling as there is an extra layer that is sometimes there that they then may or may not have to deal with.

Current situation

Rendering from .mjs

// api/test.mjs
export function get () {
    return {
        'json': {},
    };
}
// pages/test.mjs
export default function test () {
    return html`
        <h1>This is a title</h1>
    `;
}

Results in:

<body>
    <page-test>
        <h1>This is a title</h1>
    </page-test>
</body>

Rendering from .html

<!-- pages/test.html -->
<h1>This is a title</h1>

Results in:

<body>
    <h1>This is a title</h1>
</body>

Desired situation

At the very least, both situations should result in the same output so authors have a predictable output where they can apply styling to.
The most desired situation is that .mjs files are rendered like the .html files without the wrapper element so the framework is as little in the way as possible and authors can decide if they want a wrapper element, and if so what its signature is.
If a wrapper element is needed, changing the signature from <page-test> to something like <enhance-page route="test"> is preferable. That way there is a predictable element name that can be targeted with CSS and is easier queryable for folks that want JS access for some reason.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@sjorsrijsdam