Ukrywanie elementów przez rodzica lub przodków

Mamy sobie oto kod:

<div id="TYTAN1" style="display:none;"><div id="TYTAN2" style="display:block;">aaaa</div></div>
<script>
var c=window.getComputedStyle(document.querySelector("#TYTAN2"), null).getPropertyValue("display");
console.log(c);
</script>

Według powyższego przykładu na konsoli zostanie zwrócona wartość: block, a chcę by zwróciło none, bo przecież element id="TYTAN2" jest ukrywany przez id="TYTAN1". Pytanie, co zrobić by tak było? Należy zwrócić uwagę, że element może też być ukrywany przez jego przodków. Pytanie: jak to zrobić ogólnie?

Display: none usuwa Ci całkowicie element z DOM. Dlatego spróbuj użyć na parent elemencie visibility: hidden.

A tak patrząc na tagi, w których jest Angular... dlaczego nie chcesz skorzystać z dyrektywy *ngIf?

W ogóle, ciężko mi zrozumieć, co chcesz osiągnąć po opisie, który przedstawiles.

Spróbuj tak:

document.querySelector("#TYTAN2").offsetWidth 

Jeśli jakiś element nadrzędny będzie miał display: none to offsetWidth będzie równa 0

Inaczej musiałbyś przeszukiwać wszystkie elementy nadrzędne w poszukiwaniu display: none