I need to add a Vue Web Component to improve the UI of a Server Side application.
I created the following simple application:
<script>
export default {
data() {
return { greeting: 'Hello World!'}
}
}
</script>
<template>
<p class="greeting">{{ greeting }}</p>
</template>
<style>
.greeting {
color: red!important;
}
</style>
Then I added the following to my javascript:
import { defineCustomElement } from 'vue'
import hello from './hello.component.vue'
customElements.define('v-hello', defineCustomElement(hello));
I build it using Parcel and did not get any error.
I run it and, in the browser, I see "Hello World!" but the red color is not applied.
I inspected the page source in the browser and I have:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home page</title>
<link rel="stylesheet" href="/index.css">
</head>
<body>
<v-hello>
Shadow Content (Open) = $0
<p class="greeting" data-v-c566f4="">Hello World!</p>
</v-hello>
<script src="/index.js" type="text/javascript" defer=""></script>
</body>
</html>
When I check Index.css I find the style:
.greeting{color:red!important}
Why isn't the red color style being applied?
I tried in Safari, Google Chrome and Safari.
Related
Say i have the following css file:
.testClass{
color:red;
}
And the following index.html file:
<html>
<head>
<meta charset="utf-8">
<title>Portal Demo</title>
<link rel="stylesheet" href="test.css">
<script type="module" src="../build/portal-app.js"></script>
<style>
p {
border: solid 1px blue;
padding: 8px;
}
</style>
</head>
<body>
<i class="fa fa-times"></i>
<portal-app>
<p>This is child cosntent</p>
</portal-app>
</body>
</html>
And inside of the portal-app i have the following code:
import 'sdk-button'
#customElement('portal-app')
export class PortalApp extends LitElement {
render() {
return html`
${this.renderWidget()}
`;
}
renderWidget() {
import("./views/my-test-element");
return html`
<i class="fa fa-times"></i>
<sdk-icon-button text="hello marc"><p slot="icon" class="testClass">hello</p></sdk-icon-button>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'portal-app': PortalApp;
}
}
When i run this the color of the .p tag is not red and i can't see the style. however i just add a normal p tag to html the color correctly turns red.
But it seems that inside my slot i am unable to pass the css class that is defined in the index.html can anyone tell me why?
This is expected behaviour as per Web Components Shadow DOM specifications.
In your code
<p slot="icon" class="testClass">hello</p>
This template is part of PortalApp Web Component. Which means this markup is in the Shadow DOM of Portal App web component. No css styles from outside (index.html) in you case can get applied to this markup. vice- versa is also true, i.e, no CSS leak from the component to outside of component will happen
I'm inspecting https://ionicframework.com/docs/api/alert alert..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#ionic/core/css/ionic.bundle.css"/>
<style>
:root {
--ion-safe-area-top: 20px;
--ion-safe-area-bottom: 22px;
}
</style>
<script type="module">
import { alertController } from 'https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/index.esm.js';
window.alertController = alertController;
</script>
</head>
<body>
<ion-app>
<ion-header translucent>
<ion-toolbar>
<ion-title>Alert</ion-title>
</ion-toolbar>
</ion-header>,
<ion-content fullscreen class="ion-padding">
<ion-alert-controller></ion-alert-controller>
<ion-button expand="block">Show Alert</ion-button>
</ion-content>
</ion-app>
<script>
const button = document.querySelector('ion-button');
button.addEventListener('click', handleButtonClick);
async function handleButtonClick() {
const alert = await alertController.create({
header: 'Use this lightsaber?',
message: 'Do you agree to use this lightsaber to do good across the galaxy?',
buttons: ['Disagree', 'Agree']
});
await alert.present();
}
</script>
</body>
</html>
There is an element there with .alert-wrapper class on it.
if you'll look at the applied CSS, it will show you opacity: 0, but the computed shows opacity: 1
I tried removing all the CSS Files from the page, all the javascript, all the other elements
I tried to move this element to the body (outside the iframe) and applying the opacity: 0 in the styles, nothing helps, the computed stays opacity: 1..
How is this possible?
They are using the Web Animations API.
elem.animate([{ opacity: "1" }],{duration: 1, iterations: 1, fill: "forwards"});
#elem {
opacity: 0;
}
<div id="elem">Hello</div>
I think you already know this but have you tried using - !important
The initial value of opacity is - 1.0
Inherited - no
Computed value -> the specified value, clipped in the range [0,1]
source - MDN
I use Laravel Mix to compile and extract component css to single file such as app.css. For example I have a component like this:
<template>
<div class="text"> </div>
<template>
...
<style>
.text{ color: red; }
</style>
In webpack.mix.js is:
mix.autoload({
jquery: ['$', 'window.jQuery','window.$'],
quill: ['window.Quill','Quill']
});
mix.options({
extractVueStyles: 'public/css/app.css',
});
mix.js('resources/assets/js/app.js', 'public/js')
.sourceMaps()
.version();
and I put this code in master..blade.php
<link rel="stylesheet" href="{{ url(mix('/css/app.css')) }}">
But app.css is empty and my component css put in html>head as inline style:
<html>
<head>
...
<style>
.text{ color: red; }
</style>
</head>
...
</html>
What should I do to extract and put all component css in app.css?
My index.js for React, I used a create-react-app starter project.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
My app.js includes:
import './App.css';
and I use the CSS:
.body {
background-color: "green"
}
and the body does not change to green.
How do I modify CSS? I also tried placing app.css into public/app.css and loading with link rel="stylesheet" Element inspector still showed no effect.
Element inspector shows margin of 8px on body element from "user agent stylesheet".. nothing from my loaded css.
EDIT:
I also try inline style tag:
<!doctype html>
<html lang="en">
<script src="web3.js"></script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>CryptoClicker</title>
</head>
<body>
<div id="root"></div>
</body>
<style>
.body {
background: "green";
}
</style>
</html>
no effect.
You're using .body which is looking for elements with the class 'body' - as there's a . Change that to body (with no .) and it'll style the body element rather than the class.
Also, named colours in CSS are not variable strings - so remove the quotes:
body {
background: green;
}
It'd be worth putting your styles back into App.css and importing it in JS rather than using the <style> tags.
I am trying to style the paper-drawer-panel using the Custom CSS Mixins as mentioned here. The paper-drawer-panel.css file applies
#apply(--paper-drawer-panel-left-drawer-container);
#apply(--paper-drawer-panel-main-container);
respectively for the drawer and the main containers. But, the styles set using the mixins do not seem to be working
The below is the code for paper-drawer-panel demo I have used.
<html>
<head>
<title>paper-drawer-panel demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="stylesheet" href="bower_components/paper-styles/demo.css">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<style>
#drawerPanel {
--paper-drawer-panel-left-drawer-container: {
background-color: #eee;
};
--paper-drawer-panel-main-container: {
background-color: gray;
};
}
</style>
</head>
<body class="unresolved fullbleed">
<paper-drawer-panel id="drawerPanel">
<div drawer>
<div>Drawer content... </div>
</div>
<div main>
<div>
<paper-button paper-drawer-toggle raised>toggle drawer</paper-button>
</div>
</div>
</paper-drawer-panel>
</body>
</html>
The documentation over at https://elements.polymer-project.org/elements/paper-drawer-panel states that this is valid too.
Styling paper-drawer-panel:
To change the main container: paper-drawer-panel {
--paper-drawer-panel-main-container: { background-color: gray; }; }
To change the drawer container when it's in the left side:
paper-drawer-panel { --paper-drawer-panel-left-drawer-container: {
background-color: white; }; }
So, what am I doing wrong in trying to get this simple thing working?
I am also testing the new styling schema of Polymer 1.0. It seems that you need to add is="custom-style" to the style tag.