javascript - エンバーを使用した縦の図

Question

関連項目を表示するための図を作成しています:ブートストラップ 3.0 を使用したjsfiddle 。この例では、Ember を使用していません。これは非常に単純な例です。

しかし、問題は、Ember を使用して項目を動的に生成するときです。ダイアグラムは、最初、最後、および唯一の子セレクターで予期されたものとして表示されません。これは、ember が要素の前後に 1 つまたは 2 つのスクリプト タグを追加するために発生します。

<div class="level closed" style="display: block;">
    <script id="metamorph-218-start" type="text/x-placeholder"></script><script id="metamorph-216-start" type="text/x-placeholder"></script>
    <div class="item">
    <span class="title"><script id="metamorph-219-start" type="text/x-placeholder"></script>Element name 1<script id="metamorph-219-end" type="text/x-placeholder"></script></span>
    </div>  
    <script id="metamorph-216-end" type="text/x-placeholder"></script><script id="metamorph-217-start" type="text/x-placeholder"></script>
    <div class="item">
    <span class="title"><script id="metamorph-220-start" type="text/x-placeholder"></script>Element name 2 <script id="metamorph-220-end" type="text/x-placeholder"></script></span>
    </div>  
    <script id="metamorph-217-end" type="text/x-placeholder"></script><script id="metamorph-218-end" type="text/x-placeholder"></script>
    </div>

そのために私は使用しました：

.level >.item:nth-child(3):before {
    width: 10px;
    height: 50%;
    top: 50%;
    margin-top: 2px;
    border-top-left-radius: 10px;
}
.level >.item:nth-child(3):after {
    height: 10px;
    border-top-left-radius: 10px;
}

.level > .item:nth-last-child(3):before {
    width: 10px;
    height: 50%;
    border-bottom-left-radius: 10px;
}
.level >.item:nth-last-child(3):after {
    height: 10px;
    border-top: none;
    border-bottom: 2px solid #eee9dc;
    border-bottom-left-radius: 10px;
    margin-top: -7px;
}

問題は、子供が 1 人しかいないときです。残り火なしで、次のCSSを使用しました。

.item:only-child::after {
    border-bottom: 2px solid #eee9dc !important;
    border-left: 0px !important;
    border-bottom-left-radius: 0px !important;
    margin-top: -7px !important;
    width: 48px;
    left: -48px;
}

.item:only-child::before {    
    width: 0px !important;
}

しかし、ご覧のとおり、ember はこのスクリプト タグを追加しているため、唯一の子はなく、この CSS は適用されません。