Vanilla Javascript: Find a data attribute of the same name as an element given its id

Yes, you can do that. Here's how you do it:

var usingId = document.querySelector('#tab-1');
var usingDt = document.querySelector('[data-tab="tab-1"]');
console.log(usingId);
console.log(usingDt);

<li id="tab-1">Tab</li>
<p data-tab="tab-1">P Tab</p>

Is it a bad practice?.Nope

If you are trying to select an element having an unknown html5 data-* attribute using the .id string property from a different element, you can query all elements in document, check the .name and .value of each elements' .attributes, if .value of attribute is equal to .id of element which provides .id and .name of the .attribute property is not "id", the element is matched using attribute equals selector at .querySelector()

<li id="tab-1"></li>
<p data-tab="tab-1">Content 1</p>
<script>
let id = document.getElementById("tab-1").id;
for (let el of document.querySelectorAll("*")) {
  for (let {name, value} of el.attributes) {  
  if (value === id && name !== "id") {
     document.querySelector(`[${name}="${id}"]`)
     .style.color = "green";
     break;
  }
  }
}
</script>

If the requisite is to not know the name of the attribute which value is the string you are looking for, then you can create an XPath query, which will return you all the elements having an attribute with such value :

//*[@*='value']

unwrapped :

'//' + // from root to anywhere in the tree
   '*' + // any kind of node
     '[@*' + // with any attribute
         ' = "value"' // which value is 'value'
                      ']'

var valueToFind = 'find-me';
var query = document.evaluate(`//*[@*='${valueToFind}']`, document, null, XPathResult.ANY_TYPE, null);
var elements = [], el;
while(el = query.iterateNext()){
  // in your case you will filter it to not be the original node 
  // if(el !== original)
  elements.push(el);
  }
console.log(elements);

<div data-id="find-me"></div>
<div data-id="do-not-find-me"></div>
<div class="find-me"></div>
<div class="do-not-find-me"></div>
<div style="find-me"></div>
<div id="find-me"></div>

And if the goal is to get only the elements with data-* attributes with such value, then the query is a bit more long :

//*[@*[starts-with(name(), 'data-')] = '${valueToFind}']

unwrapped :

 '//' + // from root to anywhere in the tree
  '*' + // any kind of node
   '[@*' + // with any attribute
      '[starts-with(name(), "data-")]' + // which starts with "data-"
         ' = "value"' // and which value is 'value'
           ']'

var valueToFind = 'find-me';
var query = document.evaluate(`//*[@*[starts-with(name(), 'data-')] = '${valueToFind}']`, document, null, XPathResult.ANY_TYPE, null);
var elements = [], el;
  
while(el = query.iterateNext()){
  elements.push(el);
  }
console.log(elements);

<div data-id="find-me"></div>
<div data-foo="find-me"></div>
<div data-id="do-not-find-me"></div>
<div class="find-me"></div>
<div class="do-not-find-me"></div>
<div style="find-me"></div>
<div id="find-me"></div>