Allow <SanityContent> to use :deep() selectors for custom styling

[davidstackio]

I've followed the instructions about wrapping a portable text component to add my custom serializers. However, one thing I also do is add custom formatting here.

For example in the <style> tag:

<script setup lang="ts">
import type { PortableTextBlock } from "@portabletext/types";

defineProps({
  blocks: {
    type: Array<PortableTextBlock>,
    required: true,
  },
});
</script>

<template>
  <SanityContent :blocks="blocks" />
</template>

<style scoped>
:deep(a) {
  text-decoration: none;
}
:deep(a:hover) {
  text-decoration: underline;
}

:deep(h2),
:deep(h3) {
  margin-top: 48px;
  margin-bottom: 12px;
}

:deep(p) {
  margin-bottom: 16px;
}

:deep(ul),
:deep(ol) {
  margin-bottom: 12px;
  padding-left: 24px;
}
</style>

However, this does not work since Vue does not seem to be able to apply any of the :deep() selectors to a purely functional component, which <SanityContent> is.

Describe the solution you'd like to see

Either update the docs to suggest wrapping it in a div, or make <SanityContent> a rendered component so :deep() can be used.

Describe alternatives you've considered

My current workaround is wrapping <SanityContent> in a div.

<template>
  <div>
    <SanityContent :blocks="content" />
  </div>
</template>

This correctly applies all my styles.