fixed #20

Author: GianlucaGuarini

src/index.js

@@ -33,7 +33,7 @@ function moveChildren(source, target) {
  */
 export function createElementClass(api) {
   const { css, exports, template } = api
-
+  const originalOnMounted = exports?.onMounted ?? (() => {})
   const tagImplementation = exports || {}
 
   return class extends HTMLElement {
@@ -43,7 +43,7 @@ export function createElementClass(api) {
       // create the shadow DOM
       this.shadow = this.attachShadow({ mode: 'open' })
       this.componentFactory = component({
-        exports: tagImplementation,
+        exports: { ...tagImplementation, onMounted: undefined },
         template,
       })
 
@@ -57,6 +57,12 @@ export function createElementClass(api) {
 
       // move the tag root html into the shadow DOM
       moveChildren(this.component.root, this.shadow)
+
+      // call the onmounted only when the DOM has been moved
+      originalOnMounted.apply(this.component, [
+        this.component.props,
+        this.component.state,
+      ])
     }
 
     // on attribute changed

test.js

@@ -153,4 +153,21 @@ describe('@riotjs/custom-elements', function () {
       '10px',
     )
   })
+
+  it('the shadow root is accessible on the onmounted event (issue https://github.com/riot/custom-elements/issues/20)', () => {
+    const name = tmpTagName()
+    define(name, {
+      template: (t) => t('<p><!----></p>', []),
+      exports: {
+        onMounted() {
+          console.log(this)
+          this.root.shadowRoot.querySelector('p').textContent = 'foo'
+        },
+      },
+    })
+
+    const el = document.createElement(name)
+    document.body.appendChild(el)
+    expect(el.shadowRoot.querySelector('p').textContent).to.be.equal('foo')
+  })
 })