The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Web Component Example: Just Some HTML

TODO: Pull subtitle into page object

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Web Component Example: Just Some HTML

This is a super basic Web Component. All it does
is output some HTML.

-- script
-- title: JavaScript
-- type: show

customElements.define('wc-widget', 
    class Widget extends HTMLElement {
        constructor() {
            super()
            this.attachShadow({ mode: 'open' })
            this.content = document.createElement('div')
            this.content.innerHTML = 'This is a web component'
            this.shadowRoot.append(this.content)
        }
    }
)

-- html
-- title: Output 
-- type: showabove
-- showtitle: HTML
-- class: addBorder

<wc-widget></wc-widget>

-- ref
-- title: Web Component Starter Template
-- url: /pages/html-web-component-starter-template--2uoaxmqz/index.html

-- categories
-- HTML 
-- Web Components 
-- JavaScript

-- groups
-- Web Component Snippets


-- metadata
-- date: 2023-10-30 15:07:42
-- id: 2xuo91hc
-- site: aws
-- type: post
-- status: published