DEV Community

Discussion on: Webcomponents: It's really that easy!

View post

Replies for: What is the purpose of using a <template> in your example? You never clone it, you're just getting it's innerHTML as a string. This makes it ...

Collapse
 
dannyengelman profile image
Danny Engelman • • Edited

Or maybe simplify it to:

<all-caps>this is uppercase</all-caps>
<script>
  customElements.define("all-caps", class extends HTMLElement {
    constructor() {
      const toUpper = x => x.firstChild.nodeValue.toUpperCase();
      const style = "<style>:host{color:red}</style>";
      super()
        .attachShadow({mode: "open"})
        .innerHTML = style + toUpper(this);
    }
  })
</script>
Enter fullscreen mode Exit fullscreen mode

comming back 2 years later

There is a bug in all replies code! There is no DOM available in the constructor when the Web Component is defined before being used in the DOM