Active events in vue instance encapsulated inside shadowDOM

I’m searching to trigger event from a vue instance which is encapsulated inside a shadowDOM.

For the moment, my code create a new Vue instance inside a shadowDOM and print the template without the style (because nuxt load the style inside the base vue instance).

I can call methods of each instance

But, when i’m trying to add an event / listener on my component, it doesn’t work.

DOM.vue

    <template>
        <section ref='shadow'></section>
    </template>
    
    <script>
        import bloc from '@/components/bloc.vue'
        import Vue from 'vue'
    
        export default {
            data() {
                return {
                    vm: {},
                    shadowRoot: {},
                    isShadowReady: false
                }
            },
            watch: {
                isShadowReady: function() {
                    let self = this
                    this.vm = new Vue({
                        el: self.shadowRoot,
                        components: { bloc },
                        template: "<bloc @click='listenClick'/>",
                        methods: {
                            listenClick() { console.log("I clicked !") },
                            callChild() { console.log("I'm the child !") }
                        },
                        created() {
                            this.callChild()
                            self.callParent()
                        }
                    })
                }
            },
            mounted() {
                const shadowDOM = this.$refs.shadow.attachShadow({ mode: 'open' })
                this.shadowRoot = document.createElement('main')
                shadowDOM.appendChild(this.shadowRoot)
                this.isShadowReady = true
            },
            methods: {
                callParent() {
                    console.log("I'am the parent")
                },
            }
        }
    </script>

bloc.vue

    <template>
        <div>
            <p v-for='word in words' style='text-align: center; background: green;'>
                {{ word }}
            </p>
        </div>
    </template>
    
    
    <script>
        export default {
            data() {
                return {
                    words: [1,2,3,4,5,6]
                }
            }
        }
    </script>

Any idea ?

Thank you

Answer

bloc @click.native=’listenClick’/>

Advertisement

Answer