jraedisch/component.html

## component.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Component Example</title>
    <script type="module">
        import { html, css, svg, LitElement } from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';

        class Transformer extends LitElement {
            static properties = {
                _titles: { type: Array }
            }

            constructor () {
                super()
                const items = Array.from(this.querySelectorAll('li'))
                this._titles = items.map((item) => item.innerText)
            }

            render() {
                return html`<svg
                xmlns="http://www.w3.org/2000/svg"
                height="300"
                width="400"
                viewBox="0 0 400 300"
                fill="#000000"
                >
                    ${this._titles.map((title,i) => svg`
                        <text x=10 y=${20*(i+1)}>${title}</text>
                    `)}
                </svg>`
            }
        }
        window.customElements.define('my-transformer', Transformer)
    </script>
</head>
<body>
    <my-transformer>
        <ol>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ol>
    </my-transformer>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Web Component Example</title>
	<script type="module">
	import { html, css, svg, LitElement } from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';

	class Transformer extends LitElement {
	static properties = {
	_titles: { type: Array }
	}

	constructor () {
	super()
	const items = Array.from(this.querySelectorAll('li'))
	this._titles = items.map((item) => item.innerText)
	}

	render() {
	return html`<svg
	xmlns="http://www.w3.org/2000/svg"
	height="300"
	width="400"
	viewBox="0 0 400 300"
	fill="#000000"
	>
	${this._titles.map((title,i) => svg`
	<text x=10 y=${20*(i+1)}>${title}</text>
	`)}
	</svg>`
	}
	}
	window.customElements.define('my-transformer', Transformer)
	</script>
	</head>
	<body>
	<my-transformer>
	<ol>
	<li>one</li>
	<li>two</li>
	<li>three</li>
	</ol>
	</my-transformer>
	</body>
	</html>