Utilize CSS styling on dynamically loaded HTML content

I am working on a project similar to the StackOverflow editor. I am fetching markdown text, converting it to HTML, and then displaying it in a preview area. However, when I try to style the injected HTML elements using CSS, the styles are being ignored. Upon inspecting the browser, I noticed that the stylesheet I created for these elements is not appearing. I suspect this issue may be related to the order of CSS rendering. Any suggestions or guidance would be greatly appreciated.

<template>
  <div>
    <div class="item">
      <label for="content">Contents</label>
      <textarea name="content" id="content" v-model="mdtext"></textarea>
    </div>
    <div id="preview"></div>
  </div>
</template>

<script>
import marked from 'marked'

export default {
  data () {
    return {
      mdtext: ''
    }
  },
  watch: {
    mdtext: function () {
      document.getElementById('preview').innerHTML = marked(this.mdtext)
    }
  }
}
</script>

<style scoped>
...
#preview p{
  width: 100%;
  word-break: break-all;
  word-wrap: break-word;
}
...
</style>

https://i.sstatic.net/fWwDT.png

Answer №1

Utilizing scoped css causes Vue to include the data-v- attribute to the p element. However, the resulting <p> does not possess this same data-v- attribute, leading to issues in functionality.
This problem can be resolved by utilizing the deep selector:

<style scoped>
#preview >>> p {
   
}
</style>

For more information, please visit:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Pair each element with an array of objects and add them to a fresh array

Let's consider an array of objects like, const attachmentData = [{name: 'Suman Baidh',attachment: ["123","456"]}, {name: 'John Sigma',attachment: ["789","101112]}, ...

CSS - turn off inheritance for font styling

I am trying to figure out how to turn off the font:inherit property in Ionic's global CSS. This property is causing issues when I try to style text using ng-bind-html, as it adds unnecessary classes to elements like i and bold. I attempted to override ...

Instructions on how to insert information into an array by clicking a button

As a newbie JavaScript programmer, I am struggling to figure out how to make my code work as a function. I want to update the ajax_data array every time I click the add row button. Fresh JS coder looking for some guidance. var ajax_data = [{ Type: "A ...

Sending personalized list attributes through JSON to JavaScript in ASP.NET

Below is a custom list I created for pagination of my results: public class PagedList<T> : List<T> { public int PageIndex { get; set; } public bool HasNextPage { get; set; } // ... } I aim to pass this list via JSON to the View: ...

What is the best method for creating thumbnail URLs for video files in HTML with JavaScript?

I am facing an issue with generating a thumburl for uploaded video files. After dynamically creating an input file and uploading local video files, I am able to retrieve the name and size of the file along with other information as shown in the screenshot ...

display information in a structured table format

I am in need of HTML code that will render headers aligned above corresponding values when displayed. header1 header2 header3 List item 1 value111 value112 value113 value121 valueb122 valueb123 List item 2 value211 value212 value213 value221 valueb2 ...

Ways to align a Unordered List (ul) in the middle

I have a list of items with some elements floated to the left. Currently, it looks like this: | A | B | C | D | E < empty space> | I would like it to appear as: | A | B | C | D | E | Centered on the page with centered contents as well. HTML < ...

Transferring information through Ajax to PHP

When using AJAX to send a string via the GET method, I've noticed that punctuation characters sometimes don't appear when echoed in PHP. For instance, sending "sub + 12" results in PHP echoing "sub 12", and sending "&()*" echoes an empty str ...

Troubleshooting checkbox change not being detected by Ajax in JavaScript

I have encountered a problem with my AJAX JavaScript code that checks whether a checkbox is selected or not. The issue arises when fetching data from MySQL - the code works correctly for the first row, but always sends checkboxstatus = 1 for the subsequent ...

Configuring CSP in NUXT

Encountering CSP blocking with my local js files. Below is my nuxt.config.js: unsafeInlineCompatibility: true, policies: { 'default-src': ["'self'", 'delivly.com', 'localhost', '*.gstatic.co ...

Correcting the reference to "/" (root) for assets after relocating the site to a subdirectory

I currently have a website located in the public_html directory, where all assets (images, css, js, etc) are referenced using /asset_folder/asset. The "/" at the beginning ensures that the browser starts from the root and navigates through the directories. ...

Align list items vertically, even when they have varying heights

I am currently working on creating rows of images, with 3 images in each row. The data being used is dynamic, however, I have provided some sample HTML and CSS below: ul { margin: 0; padding: 0; list-style: none; width: 900px; } li { margin: 0; padding: ...

Employ a variable within the fetch method to retrieve JSON data

Currently, I am in the process of developing a system that extracts specific information from a JSON file based on user input. One challenge that I am facing is how to incorporate a variable into the designated section of my code; fetch( ...

Ignore one specific file when importing all files in Angular 7

In my Angular 7 project, I am utilizing C3 and importing all the necessary files at the beginning of my .ts component file using a wildcard. import * as c3 from 'c3'; While this method works well overall, I encountered an issue where my CSS ove ...

showing a pop-up message when a specific javascript function is triggered

Here is a unique code snippet showcasing a customized dialog box created with HTML, CSS, and JavaScript. The dialog box is displayed when a button is clicked. <!DOCTYPE html> <html> <head> <style> /* Custom Modal Styles */ .modal { ...

implementing toggle functionality for an array of items in ReactJS

I have an array and I am trying to create a show/hide feature for each item based on toggling. When I click on one item, it should expand while simultaneously hiding the previously expanded item. Here is the code snippet I have been working on: class App e ...

Live tweet moderation made easy with the Twitter widget

Currently in search of a widget, jQuery plugin, hosted service, or equivalent that can be easily integrated into an HTML page. This tool should display and automatically update live tweets featuring a specific hashtag, only from designated accounts set by ...

How to ensure a list item remains in a fixed position when resizing the window

Imagine a scenario where there is an unsorted list within a resizable div element. The list is set up horizontally and aligned to the right, with one item designated as "special" and given the id="pinned". Using only CSS, can you keep the #pinned item in ...

JavaScript code using jQuery's ajax method is sending a request to a PHP server, but

Attempting to utilize jQuery ajax for PHP call and JSON return. The test is quite simple, but only receiving an empty object in response. No PHP errors appearing in the LOG File. jqXHR is recognized as an object with 'alert', yet not displayin ...

I encountered a problem in Javascript where I was unable to get the video.getCurrentTime() function to display the current time of

While everything else in my code is running smoothly with setInterval, there seems to be an issue with video.getCurrentTime() not displaying in the div id = "test" when the video is playing. I've been trying to figure out why this is happening. Here&a ...