Raw HTML without a parent element via v-html

I’m trying to build 3 front-ends/clients for the same API. vanilla-js, vue(basic including script style), and ember. But - for obvious reasons - I just want to have the one set of styles they share. So far - it’s gone very smoothly - except for this one pain-point. The CMS returns a great many complex blocks of HTML/paragraphs, headings markup etc.

Ember deals with the HTML like this: (tripple curlies) (and yes… it’s a safe string :wink:

<h2 class="whatever">{{{section.heading}}}</h2>


With vue, I’d use v-html

<h2 class="whatever">{{section.heading}}</h2>

<div v-html-'section.description'></div>

This changes the relationship between the elements because it adds a parent

h2 + p {
  margin-top: $pad;

.thing:nth-of-type(2) {
  /* etc... */

and then this type of rule no longer applies/describes what I want (in the Vue version). The project and it’s typography are too complex to explain here. My question is not about how I “could put a div around it”… - but more about what options I have so simulated parody feature-wise - while using the same API and Style rules.

So, I’m guessinghoping I can make a little function or something that parses the HTML?
{{ makeItWork(section.description) }} - or any solution that doesn’t change the markup.

If it can’t be done - then it can’t be done… I just need to know. : ) Thank you.

Dr. Taco pointed me here: https://github.com/vuejs/vue/issues/7431

which has some discussion and a workaround: https://jsfiddle.net/Linusborg/mfqjk5hm/ from LinusBorg

EDIT this solution ^ worked very well for me.