Node: isConnected プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年1月⁩.

isConnected は Node インターフェイスの読み出し専用のプロパティで、ノードが Document オブジェクトに（直接的または間接的に）接続されているかどうかを示す論理値を返します。

値

論理値で、 true はこのノードが関連するコンテキストオブジェクトに接続されていることを表し、 false は接続していないことを表します。

例

標準 DOM

標準 DOM の例です。

let test = document.createElement("p");
console.log(test.isConnected); // Returns false
document.body.appendChild(test);
console.log(test.isConnected); // Returns true

シャドウ DOM

シャドウ DOM の例です。

// シャドウルートを生成
const shadow = this.attachShadow({ mode: "open" });

// いくらかの CSS を作成してシャドウ DOM に適用
const style = document.createElement("style");
console.log(style.isConnected); // returns false

style.textContent = `
.wrapper {
  position: relative;
}

.info {
  font-size: 0.8rem;
  width: 200px;
  display: inline-block;
  border: 1px solid black;
  padding: 10px;
  background: white;
  border-radius: 10px;
  opacity: 0;
  transition: 0.6s all;
  positions: absolute;
  bottom: 20px;
  left: 10px;
  z-index: 3
}
`;

// 生成された style 要素をシャドウ DOM に取り付ける

shadow.appendChild(style);
console.log(style.isConnected); // Returns true