チームメンバーがコピーできるように、スニペット集をまとめたコンポーネントを作成しています  
下記のコードのようにスロット利用時にそのoutrerHtmlまたはinnerHTMLの改行が削除されてしまいます  
js的にはインデントや改行は不要なので、仮想DOMへのコンパイル時に削除されるのは理解できます  
しかし私は、このインデントや改行をのこしたオリジナルのスロットの内容を表示したいのです

```

    <div id="app">
        <component>
            <section class="card">
                <img class="card-img" src="https://dummyimage.com/600x400/000/fff" alt="">
                <div class="card-content">
                    <h1 class="card-title">Title</h1>
                    <p class="card-text">Lorem ipsum dolor sit amet,</p>
                </div>
                <div class="card-link">
                    <a href="#">Link1</a>
                    <a href="#">Link2</a>
                </div>
            </section>
        </component>
    </div>
    
    
    <script type="text/x-template" id="component">
    <div class="component">
        <div style="display: none;"><slot></slot></div>
        <div class="slot" v-html="code"></div>
        <pre class="highlight"><button @click="copy" class="btn-copy">COPY</button><code v-html="highlightedCode"></code></pre>
    </div>
    </script>
    
    
    
    <script>
        const app = Vue.createApp({})
        app.component('component', {
            template: '#component',
        })
        app.mount('#app')
    </script>
    
```

このコードは下記のようになってしまいます

```

    <section class="card"><img class="card-img" src="https://dummyimage.com/600x400/000/fff" alt=""><div class="card-content"><h1 class="card-title">Title</h1><p class="card-text">Lorem ipsum dolor sit amet,</p></div><div class="card-link"><a href="#">Link1</a><a href="#">Link2</a></div></section>
    
```

※このサンプルコードでは必要な部分を切り出しています  
そのためこのサンプルコードではslotの利用する必要がないですが、末尾に記載しているCodePenに実際のコードがあります

私が期待している結果は下記です

```

    <section class="card">
        <img class="card-img" src="https://dummyimage.com/600x400/000/fff" alt="">
        <div class="card-content">
            <h1 class="card-title">Title</h1>
            <p class="card-text">Lorem ipsum dolor sit amet,</p>
        </div>
        <div class="card-link">
            <a href="#">Link1</a>
            <a href="#">Link2</a>
        </div>
    </section>
    
```

この問題を解決するためにpreタグをコンポーネント内に入れてました

```

    <component><pre>
        <section class="card">
            ~~~~ foo bar ~~~~
        </section>
    </pre></component>
    
```

これは期待通り動作しましたがは冗長です  
このpreタグをなしに、インデントや改行を表示する方法はありますでしょうか？

Code  
▼preタグなし  
<https://codepen.io/jevouslue/pen/zYjqqZq>

▼preタグ有り  
<https://codepen.io/jevouslue/pen/VwxaLxQ>

是非ご回答よろしくおねがいします！
CC BY-SA 4.0
2022-09-14T02:06:35.213
91093
2022-09-14T02:08:33.733
2022-09-14T02:08:33.733
3060
5848
question
vue.js
slot利用時、改行が削除されてしまう