css – Downside accessing merchandise by way of information attribute

[data-context="desk"] button {
  show: inline-block;
  font-weight: 400;
  text-align: heart;
  vertical-align: center;
  user-select: none;
  background-color: clear;
  border: 1px strong clear;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: shade .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  shade: #fff;
  background-color: #28a745;
  border-color: #28a745;
  -webkit-appearance: button;
  cursor: pointer;
}

<a href="#" data-context="desk">
  <button kind="button">Button</button>
</a>