Unable to style child elements of <prismic-rich-text> component

[modwrk (Erik Clevenger)]

I have a "Text Slice" component that is meant to render rich text being queried from Prismic and delivered to said component as props, which are then passed to <prismic-rich-text>. Like so:

<template>
  <div>
    <prismic-rich-text
      class="content-section"
      :class="'text-' + slice.slice_label"
      :field="slice.primary.rich_text"
      :htmlSerializer="anotherHtmlSerializer"
    />
  </div>
</template>

Using an Html Serializer I am adding classes to the child elements of the <prismic-rich-text> component. I have tried registering the serializer outside of the export statement (per the docs) as well as from within the mounted() lifestyle hook using the this.$nextTick() global function. As shown below:

<script>
import prismicDOM from 'prismic-dom'

const Elements = prismicDOM.RichText.Elements

const anotherHtmlSerializer = function (type, element, content, children) {
  if (type === Elements.paragraph) {
    return `<p class="test-paragraph">${children.join('')}</p>`
  }
  return null
}
export default {
  name: 'TextSlice',
  props: ['slice'],

  data() {
    return {
      anotherHtmlSerializer,
    }
  },......

as well as:

  data() {
    return {
      anotherHtmlSerializer: null,
    }
  },
  mounted() {
    this.$nextTick(() => {
      const Elements = prismicDOM.RichText.Elements
      this.anotherHtmlSerializer = function (type, element, content, children) {
        if (type === Elements.paragraph) {
          return `<p class="test-paragraph">${children.join('')}</p>`
        }
        return null
      }
    })
  },

I have verified in the browser's Dev Tools that the classes from the serializer are indeed being added to the child elements. However any styles I apply to those classes are not loading, which I have verified by comparing the "Style Editor" tab to what is shown in the Inspector within Dev Tools. Furthermore, I have found that styles applied to children of the <prismic-rich-text> using html tags also do not render.

Any elements outside of the <prismic-rich-text> component style as expected.

I appreciate any advice or guidance on this issue. I'm kind of at standstill. Thanks!

[samlittlefair]

Hey Erik,

Welcome to the Prismic community, and thanks for posting this question!

Okay, I'm wondering if this could be an issue with scoped CSS. If that's the case, you want to use a deep selector, like /deep/, >>>, or ::v-deep:

/* 
I'm not sure if the 'content-section' class will work.
You might need to apply a class to the parent element,
so I used .rich-text
*/
.rich-text /deep/ .text-paragraph {
  background: purple;
}

Let me know if that works! If not, could you send your project as a zip file or GitHub repo, so I can try to recreate the issue?

Sam

[modwrk (Erik Clevenger)]

That worked! Thank you very much.

So glad it was an easy fix. Again, much appreciated.

[samlittlefair]

Awesome! Glad to hear it. Let me know if you need anything else