<lig-single-biography>
  <img
    slot="img"
    src="https://cdn.liginc.co.jp/wp-content/uploads/2017/07/149999564855711400_38.png"
    width="150"
    height="150"
  >
  <p slot="name" class="red">づや</p>
  <p slot="text">大学卒業後、Javaプログラマとしてシステム開発に従事後、2007年株式会社アストロデオを創業。システム開発全般を統括。2012年1月に創業した株式会社アストロデオが株式会社LIGと合併し、現職。取締役CTOとして社内の技術全般を統括。現在は、取締役兼監査役として経営に従事。また、経営に携わりながらもエンジニアとしてシステム開発も行っている。</p>
</lig-single-biography>
<lig-single-biography>
  <img
    slot="img"
    src="https://cdn.liginc.co.jp/wp-content/uploads/2017/09/150582513747649200_98.png"
    width="150"
    height="150"
  >
  <p slot="name">まこと</p>
  <p slot="text">LIGの執行役員、すごく仕事ができてセレブ。怖い。リモートワークだかなんだかでオフィスにいなかったので、ビデオチャットにて召喚した。</p>
</lig-single-biography>
<script>
class LigSingleBiography extends HTMLElement {
  static get template() {
    return `
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      :host {
        display: block;
      }
      .wrapper {
        display: flex;
        align-items: center;
        padding: 20px;
        border: 1px solid #e1e1e1;
        box-shadow: 0 3px 0 rgba(8,1,2,0.03);
      }
      .head {
        padding-right: 20px;
      }
      .body {
        font-size: 16px;
        line-height: 2;
      }
      ::slotted([slot="name"]) {
        font-weight: bold;
      }
    </style>
    <div class="wrapper">
      <div class="head">
        <slot name="img"></slot>
      </div>
      <div class="body">
        <slot name="name"></slot>
        <slot name="text"></slot>
      </div>
    </div>
    `;
  }

  constructor() {
    super();

    this.attachShadow({
      mode: 'open'
    }).innerHTML = LigSingleBiography.template;
  }
}
customElements.define('lig-single-biography', LigSingleBiography);
</script>
lig-single-biography {
  margin-bottom: 20px;
}
.red {
  color: red;
}
Rerun