I'm coming from Polymer and am wondering if and how Aurelia supports Shadow DOM and related features that Polymer supports. I see mention that Aurelia supports Shadow DOM v1 slots, which works fine, but I can't enable Shadow DOM - I assumed that there was a Polyfill since v1 isn't implemented yet, or something like the Polymer Shady DOM?
My main interest in Shadow DOM is style encapsulation. Polymer allows styling of the generated container element using the :host selector from within the template - does Aurelia allow something similar?
<template>
<style>
:host {
display: block;
}
</style>
</template>
Also, is there a polyfill for CSS variables, like Polymer (essential for Shadow DOM)?
After some digging - Aurelia only supports Shadow DOM V1 via native browser support (apart from slots), so even if you enable Shadow DOM support nothing happens because browsers don't support it yet.
Related
I am currently using Vue and Vue2-google-maps. When my webpage is loaded, the UI for Google Map shows up (Zoom buttom, full screen) and when I try to drag the map around the console shows that I am recieving information from Google's API. However, the actual map itself is blank and nothing is showing.
<GmapMap :center="{lat:10, lng:10}" :zoom="12" map-type-id="terrain" style="width:750px; height:750px" ></GmapMap>
Under my main.js of Vue, I have declared my API key and use GoogleMaps accordingly.
Vue.use(VueGoogleMaps, {
load:{
key:'REDACTED',
}
});
I have ensured that my height and width are set to PX values, tried shaking the browser etc. I followed a separate tutorial that does not use Vue but those include a <script> tag inside the document html, which I am unable to do in Vue template as they are ignored. The console also does not show any errors at all.
I will appreciate any help! Thank you.
I found the solution. I had a CSS style for background color for all and that was overriding everything that Google Maps displayed. This style was in the app.vue parent component and I was troubleshooting in a child component hence I was unable to find the issue. Removing this <style> made everything work as normal again.
<style>
*{
background-color: aliceblue;
}
</style>
I'm using the v-app-bar label for my header and I want the shadow of the element to be lighter since it looks too prominent. I'm unable to apply box-shadow attribute to the v-app-bar element.
should I do?
Method 1
You can use component prop called elevation. Look into the app bar docs into API section (https://vuetifyjs.com/en/components/app-bars/#api) and select PROPS tab you can see elevation prop.
Method 2
You can use builtin elevation classes. You can read more about them here: https://vuetifyjs.com/en/styles/elevation/
Method 3
Vuetify allows you to customize sass styles.
If you go here: https://vuetifyjs.com/en/components/app-bars/#api and select SASS tab you can see that they provide some variables which you can edit.
One of them is elevation which is responsible for box-shadow.
Of course to do so you need to have vuetify installed as a vue-cli plugin or in a we pack environment as you can read here: https://vuetifyjs.com/en/customization/sass-variables/
Method 4
You can apply css directly but not to the v-app-bar because it's only vuetify component name which then gets generated into HTML. You can inspect your page using e.g. chrome dev tools and see what structure app bar has and then apply css styles to the right element.
I am new in vue and vuetify and I read all the documentations in the internet but I still don't know how to inject CSS from vuetify CSS. I have researched some possible solutions, tried to implement what I searched but I realized that the solutions I have found was for Vue 3.9 and below. I am currently using vue 4.0.5 and vue cli 4.0.5. I badly need a solution to this because I am already spending hours looking for workarounds.
I had the same experience in my latest project. Vuetify has some quirks in it that make CSS styling a little different. In general, using <style scoped> will not cause any changes with Vuetify, but using the global scoping <style> will. For some properties, you'll only notice changes if you use the !important tag.
You'll need to make sure you're wrapping everything and using loaders properly to get your CSS working as you intend. Details regarding that are here in detail:
Vuetify - CSS not working (taking effect) inside component
For a project where Vue is dropped in, is using style or similar available to components?
Vue.component('vue-sup', {
template: '<div>Sup</div>',
style: '* { color: blue; }'
})
I tried adding the styles inside the template like:
<div>
<style>
.here{}
</style>
<div>Sup</div>
</div>
which didn't work because the template parser detected a tag with side effects
Vue's implementation of scoped css is entirely a feature of vue-loader, and thus only works with compilation. Scoped css momentarily made a debut into Html 5 but saw almost no adoption and was dropped entirely as far as I know. There is the anticipation that "Shadow DOM" may be supported broadly and could be use to add scoped css, but adoption is not there yet either.
So at this point you can add unique classes or ids obviously to a parent container and scope your css that way, but is understandably not what you are asking for nor is it always practical.
The best alternative is a pollyfill. There are several that are available. Here is one by Sam Thorogood and another by Thomas Park but if you do a quick search you will likely discover more.
I came across the same problem and I'm able to insert styling inside Vue template
by creating a component that will dynamically insert a <style> tag on the DOM. This might be impractical like #skribe said but it allows me to have separate CSS from JS without using .vue extension.
You can take a look at this
I'm developing an app using quasar framework and Vue js. Initially, I used Drag and drop functionality and linking them with connectors in my web app using jquery UI and jsplumb.
Basically, the jsplumb library is a plugin for jquery and jquery occupies more memory space comparing to Vue js.
So, I thought of using pure Vue js functionalities for my requirement. So is there any Vue js plugins which does following tasks?
1) Able to drag blocks from one container and drop it to the specific location in another container.
2) Able to add endpoints(as provided in jsplumb) to the dropped blocks
3) And able to draw a connecting link between any blocks in the container.
So is there any way of replacing jquery and jsplumb with only pure Vue js and Quasar?
as per documentation: JSPlumb features there's a vue version, but it looks like it's paid.
Also in other part it says "Although jsPlumb has no dependency on jQuery, it also supports jQuery selectors as arguments for elements (vanilla jsPlumb because jQuery's selector object is list-like, ie. it has a length property and indexed accessors)." So you don't need jQuery to use JsPlumb. We got that cover.
Then you can use Draggable which uses vue.sortable as well, for the drag and drop part.
So, what if you already have a bunch of selectors with jsplumb in Jquery? you could replace jquery with this selector method:
window.$ = function(selector) {
var selectorType = 'querySelectorAll';
if (selector.indexOf('#') === 0) {
selectorType = 'getElementById';
selector = selector.substr(1, selector.length);
}
return document[selectorType](selector);
};
Snippet from here: https://blog.garstasio.com/you-dont-need-jquery/selectors/
Hope it helps.