importas el componente deseado

import createComp from '**@component-path**'

en tu index.js lo declaras dentro de un custom elements

customElements.define('hello-world', createComp())

puede recibir la configuración del componente como parámetro ó ...

customElements.define('hello-world', createComp(
  {
    width: "100px",
    scale: 1.1,
    time: ".4s",
    companim: "ease-out",
    maskOpacity: 0.5,
    maskColor: '#fff'
  }
))

... como atibuto config en la etiqueta html

<hello-world config='{
    "width":"200px", 
    "scale":1.1, 
    "time":".4s", 
    "companim":"ease-out", 
    "maskOpacity":0.6,
    "maskColor":"blue"
  }'>
</hello-world>

para que herede las propiedades del componente agregas el css-->

img {
  width: inherit;
}

en caso de que ocupes que redireccione el css es

a{
  width: inherit;
}
img {
  width: inherit;
}

el componente basico debe contener la etiqueta img con el slot img

<hello-world>
  <img slot="img" src="url img" alt="">
</hello-world>

para acceder a la configuracion que agregaste en tu js agrega el attributo file

<hello-world file>
  <img slot="img" src="url img" alt="">
</hello-world>

si ocupas que redireccione agrega el attributo link

<hello-world file link>
  <a slot="link" href="#">
    <img slot="img" src="url img" alt="">
  </a>
</hello-world>

un ejemplo seria

<script>
  import createComp from '**@component-path**'

  customElements.define('hello-world', createComp({
  width: "100px",
  scale: 1.1,
  time: ".4s",
  companim: "ease-out",
  maskOpacity: 0.5,
  maskColor: '#ff5'
}))
</script>


<hello-world file link>
  <a slot="link" href="#">
    <img slot="img" src="url img" alt="">
  </a>
</hello-world>


<style>
  a{
    width: inherit;
    }
  img {
    width: inherit;
  }
</style>