@html prop renders unexpected tags #57

rianmurnen · 2022-10-21T16:17:02Z

Using the @html prop on an element outside a <template> behaves as expected. But when @html is applied inside a <template> the component instance is rendered with unexpected <html>, <head>, and <body> elements.

Package package.json

{
  "name": "learn-webc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "npx @11ty/eleventy",
    "start": "npx @11ty/eleventy --serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@11ty/eleventy": "^2.0.0-canary.16",
    "@11ty/eleventy-plugin-webc": "^0.5.1"
  }
}

Config .eleventy.js

const pluginWebc = require("@11ty/eleventy-plugin-webc");

module.exports = function(eleventyConfig) {
	eleventyConfig.addPlugin(pluginWebc, {
		components: "_includes/webc/*.webc"
	});
};

Layout layout.webc

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div webc:nokeep @html="content"></div>
</body>
</html>

Page page.webc

---
layout: layout.webc
---
<my-test @text="text"></my-test>

Web Component my-test.webc

<div @html="text"></div>
<template>
    <div @html="text"></div>
</template>

Output

The output as viewed in a text editor, not the browser dev tools. The browser seems to ignore and strip the unexpected elements but they are present in the actual generated file.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div>text</div>
<template>
    <div><html><head></head><body>text</body></html></div>
</template>
</body>
</html>

I had the same experience when I downloaded 11ty/demo-webc-counter and ran it without any modification.

The text was updated successfully, but these errors were encountered:

zachleat · 2022-10-27T20:32:02Z

Also reported by @jonathantneal on Twitter https://twitter.com/zachleat/status/1585715141198639105

zachleat · 2022-10-27T20:33:41Z

Regression from #34

zachleat · 2022-10-27T20:37:13Z

This will ship with the next version!

rianmurnen changed the title ~~WebC @html prop renders unexpected tags~~ @html prop renders unexpected tags Oct 21, 2022

zachleat self-assigned this Oct 27, 2022

zachleat added the bug Something isn't working label Oct 27, 2022

zachleat added this to the Next Version milestone Oct 27, 2022

zachleat closed this as completed in 0f4a77e Oct 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@html prop renders unexpected tags #57

@html prop renders unexpected tags #57

rianmurnen commented Oct 21, 2022 •

edited

Loading

zachleat commented Oct 27, 2022

zachleat commented Oct 27, 2022

zachleat commented Oct 27, 2022

@html prop renders unexpected tags #57

@html prop renders unexpected tags #57

Comments

rianmurnen commented Oct 21, 2022 • edited Loading

Output

zachleat commented Oct 27, 2022

zachleat commented Oct 27, 2022

zachleat commented Oct 27, 2022

rianmurnen commented Oct 21, 2022 •

edited

Loading