Каков наилучший способ найти корневой узел элементов DOM (тень или свет)

#javascript #web-component #shadow-dom

#javascript #веб-компонент #shadow-dom

Вопрос:

Я хотел бы найти область DOM данного элемента. Другими словами, документ или фрагмент документа, который его содержит.

Есть ли что-нибудь лучше / быстрее, чем приведенный ниже код?

 function getRootNode( element ){
  if( document.contains(element) ){
    return document;
  }

  var root = element;
  while( root.parentNode ){
    root = root.parentNode;
  }
  return root;
}
  

http://jsbin.com/rudik/4/edit

Ответ №1:

Вы можете просто использовать ownerDocument :

 element.ownerDocument;
  

Комментарии:

1. Но для не импортированного element.ownerDocument возвращается document теневой узел DOM, а не фрагмент документа / shadowRoot, который его содержит. Смотрите здесь: jsbin.com/rudik/5/edit

Ответ №2:

Node.getRootNode() — лучший способ сделать это в shadow dom, он вернет теневой корень, в противном случае он вернет документ. Смотрите: https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode

Краткое примечание: В настоящее время он не поддерживается IE / Edge

Комментарии:

1. Пожалуйста, добавьте пример кода в свой ответ, а не просто ссылки на внешние сайты.

2. Да, конечно! Смотрите мой CodePen: codepen.io/Johann-S/pen/KyEdYW На основе кода, представленного @tomalec