In a custom component, is it faster to load styles in style tags or use a link tag?

I'm working on some custom components and I'm wondering if it's best practice to load the styles in style tags within the template or use a link tag (rel="stylesheet") to call the styles?

Using style tags

const template = document.createElement('template');
template.innerHTML = `
  <style>
    .class-one {property: value;}
    .class-two {property: value;}
  </style>
  <div class="class-one class-two">
    <a href=""><slot></slot></a>
  </div>
`;

vs. using a link tag

const template = document.createElement('template');
template.innerHTML = `
  <link rel="stylesheet" href="path/to/styles.css">
  <div class="class-one class-two">
    <a href=""><slot></slot></a>
  </div>
`;

Is one of these provide better performance? How can I test to see which option loads the element faster?