fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
4.4 KiB
4.4 KiB
title, impact, impactDescription, type, tags
| title | impact | impactDescription | type | tags | |||||
|---|---|---|---|---|---|---|---|---|---|
| Scoped CSS Does Not Apply to Dynamically Added Content | HIGH | Programmatically inserted DOM elements won't receive scoped style data attributes, causing styles to fail silently | gotcha |
|
Scoped CSS Does Not Apply to Dynamically Added Content
Impact: HIGH - Vue's scoped CSS works by adding data attributes to elements at compile time. Content added dynamically at runtime (via v-html, JavaScript DOM manipulation, or third-party libraries) won't have these attributes, so scoped styles won't apply.
Task Checklist
- For
v-htmlcontent, use:deep()selectors or unscoped styles - Avoid programmatic DOM manipulation; prefer Vue's reactive template system
- When DOM manipulation is unavoidable, use global styles with unique class prefixes
- Consider CSS modules for content that mixes static and dynamic elements
Problematic Code:
<script setup>
import { ref } from 'vue';
const htmlContent = ref('<p class="dynamic">This is dynamic content</p>');
</script>
<template>
<div class="container">
<div v-html="htmlContent"></div>
</div>
</template>
<style scoped>
/* BAD: Won't apply to the dynamic <p> element! */
.dynamic {
color: red;
font-weight: bold;
}
</style>
Correct Code:
<script setup>
import { ref } from 'vue';
const htmlContent = ref('<p class="dynamic">This is dynamic content</p>');
</script>
<template>
<div class="container">
<div v-html="htmlContent"></div>
</div>
</template>
<style scoped>
/* GOOD: Use :deep() for v-html content */
.container :deep(.dynamic) {
color: red;
font-weight: bold;
}
</style>
Why This Happens
Vue scoped CSS adds a unique data attribute (e.g., data-v-7ba5bd90) to:
- All elements in the component's template (at compile time)
- All CSS selectors
<!-- What Vue generates at compile time -->
<div class="container" data-v-7ba5bd90>
<div data-v-7ba5bd90>
<!-- v-html content is inserted at runtime WITHOUT the attribute -->
<p class="dynamic">This is dynamic content</p>
</div>
</div>
/* Generated scoped CSS */
.dynamic[data-v-7ba5bd90] {
color: red;
}
/* ^ Won't match because the dynamic <p> doesn't have data-v-7ba5bd90 */
Alternative: Global Styles with Unique Prefix
<script setup>
import { ref } from 'vue';
const htmlContent = ref('<p class="my-component-dynamic">Dynamic text</p>');
</script>
<template>
<div class="my-component">
<div v-html="htmlContent"></div>
</div>
</template>
<!-- Use unscoped styles with unique prefixes -->
<style>
.my-component .my-component-dynamic {
color: red;
}
</style>
Programmatic DOM Manipulation
When using third-party libraries that manipulate the DOM:
<script setup>
import { ref, onMounted } from 'vue';
const editorRef = ref(null);
onMounted(() => {
// Third-party editor that injects its own DOM elements
initRichEditor(editorRef.value);
});
</script>
<template>
<div class="editor-wrapper">
<div ref="editorRef"></div>
</div>
</template>
<style scoped>
/* BAD: Won't reach injected editor elements */
.editor-toolbar { ... }
.editor-content { ... }
</style>
<style>
/* GOOD: Global styles scoped by parent class */
.editor-wrapper .editor-toolbar {
background: #f5f5f5;
}
.editor-wrapper .editor-content {
padding: 1rem;
}
</style>
Best Practice: Prefer Reactive Templates
Instead of dynamic HTML, use Vue's reactive system when possible:
<script setup>
import { ref } from 'vue';
// BAD: Dynamic HTML that needs special style handling
const badHtml = ref('<span class="highlight">text</span>');
// GOOD: Reactive data that templates handle
const items = ref([
{ text: 'Item 1', isHighlighted: true },
{ text: 'Item 2', isHighlighted: false },
]);
</script>
<template>
<!-- BAD -->
<div v-html="badHtml"></div>
<!-- GOOD: Scoped styles work normally -->
<ul>
<li v-for="item in items" :key="item.text" :class="{ highlight: item.isHighlighted }">
{{ item.text }}
</li>
</ul>
</template>
<style scoped>
/* Works perfectly with reactive template */
.highlight {
background: yellow;
}
</style>