30:[] 2e:{"title":"Hello Web Components","cells":[{"id":213,"value":"html`

Hello Web Components

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`Observable's runtime and web components dont play along well, read more about it [here](https://talk.observablehq.com/t/web-components-on-observable/2561). This notebook experiments on finding a quirky way to interactively develop web components on observable notebooks (sort of like a code playground)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"tag_name = \"wc-example\" //your element tag name","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"mutable iterations = 0 //as we cant redefine the custom element, we increment it on each iteration","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"nickname = tag_name + \"-\" + iterations","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"element_maker = {\n mutable iterations = mutable iterations + 1;\n const nickname = tag_name + \"-\" + mutable iterations;\n /*\n \n \n */\n const { LitElement, html } = lit;\n class MyElement extends LitElement {\n render() {\n //make some edits here for tesing!\n return html`\n

Hello from My Element!

\n `;\n }\n }\n /*\n \n \n */\n\n !window.customElements.get(nickname) &&\n window.customElements.define(nickname, MyElement);\n\n return MyElement;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"html`<${nickname}>`","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"element_maker.toString()","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"lit = import('@polymer/lit-element')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}