given the following code, and the lit-html vscode extension, syntax highlighting doesn't work on the static styles getter
class MyComponent extends LitElement {
// SYNTAX HIGHLIGHTING FAILS
static get styles() {
return css`
* {}
`
}
// SYNTAX HIGHLIGHTING WORKS
render() {
return html`
<style>
* {}
</style>
`
}
}
however it does work in the html template in the render function
how bad, for performance, is opting for the styles in the render function, instead of the static styles getter?
Moving styles into the render function would mean:
lose all the performance gains (you get by using constructible stylesheets)
and it might tempt you to use ${this.foo} inside it (which is a bad idea if
you want to be performant or if you want to support non native shadow dom
browsers)
So I would say it's a bad idea to do this for syntax highlighting.
You can get those by using more/different plugins:
lit-plugin Syntax highlighting, type checking and code
completion for lit-html (replaces lit-html vscode extension)
vscode-styled-components Highlights all
your css tagged template literals (adds css highlighting alone - e.g. combine it for example with lit-html vscode extension)
An up to date list you should always find here https://open-wc.org/developing/ide.html#plugins
Related
Is it possible to apply framework styles to nested lit-element? An idea is to disable shadow dom. I tried this.
createRenderRoot() {
return this;
}
It does not do what I need. I see that I can recompile styles into components. But right now I am looking for an easier solution.
There is a solution - Specify the render root. This solution rid of shadowRoot. Styles were applied but , does not work.
If you want to use global styles you'll have to disable Shadow DOM in the whole app tree: if a single component has a shadow root its whole subtree won't be affected by external styles.
Anyway, as you noticed, slots only work with shadow DOM enabled. In this case using a common style library/framework is still possible, see for example Sharing Styles, Using Bootstrap in Web Components, Importing external stylesheets.
Yes, but disabling shadow DOM is the wrong way to do it it.
LitElement used adopted stylesheets, which let you load/create the CSS once, but apply it to the shadow DOM of the component. You can create this globally, apply it in each component, and effectivly have styles that are shared by all your components, but (critically) don't apply to any external component you load or any external app that loads your component.
You can do something like:
// common-styles.js
export const styles = css`...`;
// any-component.js
import { styles } from 'common-styles.js';
...
static get styles () { return [styles]; }
As the styles object is shared it doesn't download or parse again - all your components get a reference to the same styles, rather than global styles cascading down.
It works as designed. The version above does not use ShadowDom. So styles are applied. In my case, all components while style bubbling has to disable ShadowDom.
But another issue appears.
createRenderRoot() {
/**
* Render template without shadow DOM. Note that shadow DOM features like
* encapsulated CSS and slots are unavailable.
*/
return this;
}
But I need slots.
It depends on what properties you want to share.
You can share these properties from the parent element:
color
font-family and other font-* properties
All CSS custom properties (--*)
Just you need to define these properties in the parent element's :root selector.
For more information: https://lit.dev/docs/components/styles/#inheritance
I am learning to use the MVC architecture with Node, Express and Pug and am having trouble finding out how to properly access the DOM (in this case to add an EventListener). The documentation is quite terse and I wasn't able to find a solution elsewhere... which leads me to suspect I might be going about this all wrong?
This is the .pug file in question (simplified to highlight problem):
extends layout
block content
h1= title
div= foo
div
label Bar
input(
type='text'
name='city'
placeholder='start typing...'
)
input(type='submit' id='submitbtn' value='Submit')
- document.addEventListener('keydown', event => {console.log("Bleep!")})
- document.getElementById('submitbtn').addEventListener('click', () => doSomething())
^^^^^^^^
When Express attempts to render this page, I get the following error:
Only named blocks and mixins can appear at the top level of an
extending template
Am I barking up the wrong tree? If so, what is the proper way to access the DOM within the Node /
Express / Pug framework?
The error message is correct:
Only named blocks and mixins can appear at the top level of an extending template
In your example, you also have inline code at the top level of the template, which isn't allowed. You should indent those inside of the named block content.
Additionally, DOM javascript doesn't run while pug is compiling. It only runs in the browser once the Pug has compiled into HTML. In order to get that script to run, you need to place it in a script element just like you would if you were writing regular HTML.
extends layout
block content
h1= title
div= foo
div
label Bar
input(
type='text'
name='city'
placeholder='start typing...'
)
input(type='submit' id='submitbtn' value='Submit')
script.
document.addEventListener('keydown', event => {console.log("Bleep!")})
document.getElementById('submitbtn').addEventListener('click', () => doSomething())
I have a Svelte component that uses three different languages within one file. I'd like to have Vim highlight each language inside of (but not including) the appropriate tags.
How can I configure my .vimrc to enable this?
Example:
my-component.sv
<script lang='coffeescript'>
// Highlight everything in here as CoffeeScript.
import History from './History'
import Leader from './Leader'
import Spinner from './Spinner'
getBalances = () ->
response = await fetch('/api/balances')
await response.json()
</script>
<template lang='pug'>
// Highlight everything in here as Pug.
main
h1 Balance
+await('getBalances')
Spinner
+then
Leader
History
</template>
<style lang='stylus'>
// Highlight everything in here as Stylus.
main
font-family 'Helvetica Neue'
h1
font-weight 200
margin-bottom 10rem
text-align center
</style>
Analog to existing plugins for single file components like posva/vim-vue, you'd need a plugin that takes care of context sensitive syntax highlighting, like evanleck/vim-svelte or leafOfTree/vim-svelte-plugin. I cannot attest to the quality of the latter and there might be better alternatives available.
Vim needs rather specific syntax rules but since most of the work is done in the Vue plugin, it should be easy to adapt for Svelte, since the basic SFC syntax appears to be identical. From what I gather, burner/vim-svelte should do what you need.
The official docs are currently rather not helpful with that. They expect you to just have everything being HTML.
I am making a static website using Wintersmith alongside the wintersmith-stylus and wintersmith-jade plugins.
I want to add a specific CSS file in a help page. The help page is based off the "layout" template. When I try to use a block to insert the stylesheet into the html head, I receive the following error:
Line ##: Unexpected identifier
layout.jade
doctype html
html
head
block head
link(rel="stylesheet" href="/styles/layout.css")
body
...
help.jade
---
template: layout.jade
---
//- Error inducing code
extends ./layout.jade
block head
link(rel="stylesheet" type="text/css" href="../styles/help.css")
//- end of error inducing code
...
Even if I move the extends and block head lines on top of the metadata block containing template: layout.jade, I still receive the same error. Removing extends ./layout.jade results in the error lines position moving from 40 to 5 in my case.
My guess is the error is caused by the wintersmith-jade plugin, but even if that's the case I'm lost for how I would go about fixing it.
Since I wanted to use both Stylus and Jade (with Jade for both content and templates), I ended up moving over to Harp. Harp not only has Stylus and Jade "built-in", but it's also slightly simpler than Wintersmith.
It's quite a workaround, but I'd say it's actually an upgrade at the same time.
I'm not using wintersmith-jade, but it looks like that plugin shouldn't affect the regular templates in /templates (which is what I think you're referring to).
Looking at templates/article.jade, it looks like you should use just extends layout instead of extends ./layout.jade.
The default templates also do not have the metadata block, but maybe that's necessary for the plugin you're using.
For a recent site, the client has 5 different brand styling colours. So to keep track of everything in the less files (which we use node to compile to one final css file), I've defined the colours as less variables and used the .button-variant() mixin to generate the styles. e.g.
#color-cta-light: #df134d;
#color-cta-dark: #860c2f;
#color-cta-background: #fcf7fa;
.btn-cta {
.button-variant(#ffffff, #color-cta-light, #color-cta-dark);
}
That works fine. However, I've done this with panels as well, and I've now ended up with an 11,000 line long css file. It is this long because we need the majority of the default Bootstrap styling (such as .btn styling) as well as my custom styles.
What I am wondering is, (and keeping it simply by using just buttons as an example) is there a good easy way to remove the lines in the css that pertain to the default Bootstrap button styling, i.e. btn-success, btn-warning, etc. By easy, I mean automatically. We're using the node lessc modules to compile the less files (using a grunt watcher), so I imagine whatever it is that would need to happen would be run after the compile.
Alternatively, should I just amend the default bootstrap mixins to do nothing, and use my own custom mixins? I feel like that should work but that would mean a bit of extra time each new version of Bootstrap (currently 3.1) spent making sure that the custom mixins are up to date.
What I'm hoping to end up with is a single stylesheet, with default button styling from button.less without the additional overload of unused CSS. With my understanding, it's not possible but I'm hoping there are some tools out there that I don't know of that would help my situation.
If I understand you correctly, looking at both your question and your comment to Bass Jobsen, you want to keep Bootstrap styling, but not for the "button styling."
I believe the LESS (reference) feature is still what you want, but just selectively applied.
Assuming you are using the "bootstrap.less" file, add the reference notation just before the "buttons.less" file, like so (I've elided much of the normal "boostrap.less" file for brevity):
// Core variables and mixins
#import "variables.less";
#import "mixins.less";
...
// Core CSS
...
#import (reference) "buttons.less";
// Components
...
// Utility classes
#import "utilities.less";
#import "responsive-utilities.less";
This will totally deactivate all classes from "buttons.less" from being generated in your output css code, but still keep those classes available for mixin purposes. Should you need a particular piece from that code, let us say you wanted to keep the base .btn class, then you would have to add it back into your css, like so:
.btn {
.btn;
}
The outer .btn will reform a class in your code, while the inner .btn will use the referenced "buttons.less" .btn to generate the code.
Using (reference) in this way lets you selectively remove aspects of boostrap by module, while keeping those aspects accessible for the rest of bootstrap and for any mixin uses you have for it. This is probably a preferable method if you desire to remove most of the code from a module (if you actually wanted to keep most of the code, it would probably be best to just let the unused portion remain and import it normally).
You can use import with reference:
#import (reference) "bootstrap.less";
#color-cta-light: #df134d;
#color-cta-dark: #860c2f;
#color-cta-background: #fcf7fa;
.btn-cta {
.button-variant(#ffffff, #color-cta-light, #color-cta-dark);
}
This will give you only the CSS for you button. (and some :before : after pseudo classes which seems a bug for me).