visbug-lib/app/components/metatip/ally.element.js

<p align="center"> <img src="./assets/visbug.png" width="300" height="300" alt="visbug"> <br> <a href="https://www.npmjs.org/package/visbug"><img src="https://img.shields.io/npm/v/visbug.svg?style=flat" alt="npm latest version number"></a> <a href

import { Metatip } from './metatip.element.js'

export class Ally extends Metatip {
  constructor() {
    super()
  }
  
  render({el, ally_attributes, contrast_results}) {
    return `
      <figure>
        <h5>${el.nodeName.toLowerCase()}${el.id && '#' + el.id}</h5>
        <div>
          ${ally_attributes.reduce((items, attr) => `
            ${items}
            <span prop>${attr.prop}:</span>
            <span value>${attr.value}</span>
          `, '')}
          ${contrast_results}
        </div>
      </figure>
    `
  }
}

customElements.define('visbug-ally', Ally)