Is there a way to access attributes (not defined as props) from the web-component using this.$attrs?

[jennale]

Hi!

Is there a way of referencing attributes defined on a web-component (which are not defined as props) inside the vue component? This would ideally be done using this.$attrs, but I'm wondering if there's already another way.

For example:

<widget-vue prop1="1" prop2="string" class="someClass" some-attr="false"></widget-vue>

And the component definition:

Vue.customElement('widget-vue', {
  props: [
    'prop1',
    'prop2'
  ],
  mounted() {
     console.log(this.$props);   //Currently returns the props object correctly
     console.log(this.$attrs);     //Currently returns an empty object
  }
});

Ideally, console.log(this.$attrs); would print out an object containing class and someAttr. Currently it outputs an empty object.

Here's a codeSandbox as well: https://codesandbox.io/s/jovial-morning-41vru

[jennale]

Nevermind, I see that this might be a clone of #112.

Although, I wonder given that this.$slots and this.$props etc return info as expected, if we could expose some way of accessing this.$customElementAttrs too? Just to provide access programatically, but not necessarily passing it down as this.$attrs

[karol-f]

Hi, use e.g. vueInstanceCreatedCallback (this should refer to root DOM element) - https://github.com/karol-f/vue-custom-element#options or just this.$root.$el.parentNode.attributes. Regards.

[tiago-freire]

Hi, use e.g. vueInstanceCreatedCallback (this should refer to root DOM element) - https://github.com/karol-f/vue-custom-element#options or just this.$root.$el.parentNode.attributes. Regards.

@karol-f there are differences between this.$el and this.$root.$el?

[karol-f]

@tiago-freire didn't check it. You can easily try both versions