-
-
Notifications
You must be signed in to change notification settings - Fork 33.7k
-
-
Notifications
You must be signed in to change notification settings - Fork 33.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add preserveWhitespace on a per-component basis #6200
Comments
I personally think this should be consistent across each project, which is why it's a global compile-time-only option in the first place. Since this can be solved by CSS, I'd avoid adding yet another option to the runtime API. |
I respect your decision (esp. because of the performance implications), but for full clarity, white space cannot always be solved in the CSS. I will give an example. <div class="footnote"><span>Here's a footnote</span><span>↩︎</span></div> In that HTML, the <div class="footnote"><span>Here's a footnote</span> <span>↩︎</span></div> As far as I have seen, there is not CSS that can get around this without unintended side effects. Setting the parent's font size to zero and then having the child font sizes reset, using floating elements, using flexbox — all of these things introduce complexities and unintentional side effects. On the project that brought up this issue, I ultimately decided to just remove all whitespace manually. It's not pretty but it gets the job done. Anyway, just thought I'd weigh in and mention this. Thanks! |
What problem does this feature solve?
Take this component:
If preserveWhitespace is enabled in vue-template-compiler then this will get rendered on the page as this:
I would have to resort to some sort of CSS to get around this, so that it instead renders as:
What I would instead like is the ability to have preserveWhitespace enabled by default but have the ability to override this on a per-component basis. If that were an option then I could disable it for the above component and then it would render in HTML as this:
What does the proposed API look like?
I'm envisioning maybe a new top level property for the exported function within a single-file Vue component. E.g.:
The text was updated successfully, but these errors were encountered: