I am trying to create custom element without shadow DOM using polymer 2.0 with the below sample code from the https://www.polymer-project.org/2.0/start/first-element/step-2
<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<dom-module id="icon-toggle">
<template>
<style>
/* shadow DOM styles go here */
:host {
display: inline-block;
}
iron-icon {
fill: rgba(0,0,0,0);
stroke: currentcolor;
}
:host([pressed]) iron-icon {
fill: currentcolor;
}
</style>
<!-- shadow DOM goes here -->
<iron-icon icon="polymer"></iron-icon>
</template>
<script>
class IconToggle extends Polymer.Element {
static get is() {
return "icon-toggle";
}
constructor() {
super();
}
}
customElements.define(IconToggle.is, IconToggle);
</script>
</dom-module>
Could you please let me know whether it is possible with Polymer 2.0?
In Polymer2, Custom Elements are created using 'Shadow-dom' by default. If you want to create one without shadow-dom, you can force shadyDom instead. Just add 'shadydom' as an attribute to you web components script call.
<script src="webcomponentsjs/webcomponents-lite.js" shadydom></script>
Please note you will lose encapsulation with Shady Dom.
What are you trying?
"I am trying to create custom element without polymer 2.0"
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements
Could you please let me know whether it is possible with Polymer 2.0?
now im confused? So you want use Polymer or you wont use it?
Related
I'm using vite-plugin-ssr + vue-router and I want to implement critical styling.
My project has a pages folder which has the following structure:
pages/SomePage/index.vue
<template>
<div class="TestPage">
TestPage Content
</div>
</template>
<script>
export default {
name: "TestPage"
}
</script>
<style lang="css" src="./critical.css"/>
pages/SomePage/critical.css
.TestPage {
background: red;
}
I want the styles from the critical.css file to go into the <head/> tag as internal ~ <style> .SomePage {background: blue;} </style> for each route.
I tried to get inspired by the rollup-plugin-critical idea, but my knowledge is apparently not enough, because a positive result could not be achieved.
How can this be implemented?
I am trying to render a Leaflet map using Vue2Leaflet in a jsfiddle so I can get help with a specific problem but I can't even get it to render properly in the trivial case. I have already looked up how to load libraries via CDN in jsfiddle and a far as I can tell, I am doing it right. There are also no errors in the console. But the map will not render.
This is the jsfiddle: https://jsfiddle.net/iboates/bywzgf1q/3/
Vue2Leaflet also requires the vue-client-only library. I have it working in my local codebase but maybe it has something to do with why it isn't working in jsfiddle. I am also loading this library via a CDN.
I've also looked at other jsfiddles using Vue with custom libraries loaded via CDN and I don't see what is being done differently.
Apparently StackOverflow requires that a jsfiddle link requires code in the post as well, which is a bit weird to me since the code is literally contained in a link which can also execute it, but here it goes:
HTML:
<div id="app">
<client-only>
<l-map id="map" ref="map">
<l-tile-layer
:attribution="'x'"
:url="'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'"
/>
<!-- <l-geo-json
:geojson="geojsonData"
/> -->
</l-map>
</client-only>
</div>
JS:
import { LMap, LTileLayer } from "./vue2-leaflet";
new Vue({
el: "#app",
components: {
LMap,
LTileLayer,
ClientOnly
},
data: {
geojsonData: {
type: "FeatureCollection",
features: []
}
},
mounted() {
}
})
CSS
#app {
background-color: black;
height: 500px;
width: 500px;
}
#map {
height: 500px;
width: 500px;
}
There are multiple errors in your fiddle.
First of all, Vue is not installed. In addition, you try to import Vue-Leaflet like in a Webpack / Rollup build system and not the way you can use it from a CDN.
To begin with, install your CDN (Vue, Leaflet CSS, Leaflet js, Vue-Leaflet):
https://cdn.jsdelivr.net/npm/vue#2.6.12/dist/vue.js
https://unpkg.com/leaflet#1.7.1/dist/leaflet.css
https://unpkg.com/leaflet#1.7.1/dist/leaflet.js
https://unpkg.com/vue2-leaflet#2.6.0/dist/vue2-leaflet.min.js
Then, add your components the CDN-way (check official documentation: https://vue2-leaflet.netlify.app/quickstart/#if-imported-by-cdn
):
components: {
'l-map': window.Vue2Leaflet.LMap,
'l-tile-layer': window.Vue2Leaflet.LTileLayer
}
Check working fiddle: https://jsfiddle.net/scpta4jq/1/
I have a button on a summary page that #click will print a completed from that is not being rendered on that specific instance.
what is the best practice to print a component without having to render it on the active page?
I tried rendering the component on the page with visibility: hidden; so that the component renders then I can click the button to window.print()but this seems like a hack and not the best practice plus it adds a huge empty space to my instance.
I need a way to print the form (component) without actually rendering it on the page.
How do I solve the problem?
Take a look at #media features (#media print in your case). Just create a CSS class that will always apply display: none;, except when a browser in print mode.
Vue.component('my-component', { template: '<h1 class="print">Hello World</h1>' }, )
new Vue({
el: "#app"
})
.print {
display: none;
}
#media print {
.print {
display: initial;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<my-component></my-component>
</div>
The default style for the p tag on my page has some bottom margin. My component uses p tags, and accordingly, the p tags in my component text show the corresponding bottom margin. How can I override/define new css style for the p tags in my component. I define my component like this:
Vue.component ('activity-component', {
props: {
customer_id:{},
is_admin:{},
isAdmin:{},
isKitsActionplan:{},
....
template:
`<div
class="row msDashboard-box"
style="cursor:default;padding-top:12px;
padding-bottom:12px;"
>
...
<p> ... </p>
});
Maybe u can try this approach,
Pass a variable with the class name to the component
<my-component v-bind:class="variable with class name"></my-component>
Then apply a rule to all p elements inside it, something like this i guess:
.test p{
your styles
}
U can see more here: vue api class and style bindings
I dont know for sure if this was what you wanted, but i gave it a shot :)
You have several options - choose your own adventure:
Use a global utility style
Somewhere globally, define a utility class like:
.u-margin-reset {
margin: 0;
}
Then in your template:
<p class="u-margin-reset">hello</p>
Use scoped CSS
If you are using single file components, you can use scoped css:
<template>
<p class="special-p">hello</p>
</template>
<style scoped>
.special-p {
margin: 0;
}
</style>
Use inline styles
Vue.component('activity-component', {
template: `<p style="margin:0;"></p>`,
});
or
Vue.component('activity-component', {
computed: {
myStyle() {
return {
margin: 0,
};
},
},
template: `<p :style="myStyle"></p>`,
});
As an aside, I'd recommend using a CSS reset that globally resets the margins of all elements to 0. Then each component should set the margins as needed for its child elements/components. This may not be reasonable if you already have a large codebase, however.
I understand that with 'scoped' i can isolate css stylings to a component, so What's the difference between scoped and module in vuejs components? When should I use module over scoped?
According to the docs:
CSS Modules as an alternative for simulated scoped CSS
So, it's an alternative - It's also worth noting that scoped on a parent component means child components can't see the CSS but with module you can access this.$parent.$style.red to gain access to the styling.
It does however have the added advantage that you can then access your CSS from within your code:
<style module>
.red {
color: red;
}
</style>
<script>
export default {
created () {
console.log(this.$style.red)
}
}
</script>