Shadow Dom Style in Vaadin Flow
2
I've written a vaadin flow wrapper for this polymer element:
@Tag("simple-dropdown")
@HtmlImport("bower_components/simple-dropdown/simple-dropdown.html")
public class DropdownMenu extends Component implements HasComponents, HasSize, HasStyle {
...
}
This works. The documentation of simple-dropdown tells me I can style the shadow dom with this css:
simple-dropdown {
--simple-dropdown-toggle: {
justify-content: right;
}
}
However, I'm unable to find the right place for this css in Vaadin flow. Where do I have to put it?
css polymer web-component shadow-dom vaadin-flow
asked Nov 15 '18 at 19:35
F43nd1rF43nd1r
6,14331543
add a comment |
2
I've written a vaadin flow wrapper for this polymer element:
@Tag("simple-dropdown")
@HtmlImport("bower_components/simple-dropdown/simple-dropdown.html")
public class DropdownMenu extends Component implements HasComponents, HasSize, HasStyle {
...
}
This works. The documentation of simple-dropdown tells me I can style the shadow dom with this css:
simple-dropdown {
--simple-dropdown-toggle: {
justify-content: right;
}
}
However, I'm unable to find the right place for this css in Vaadin flow. Where do I have to put it?
css polymer web-component shadow-dom vaadin-flow
asked Nov 15 '18 at 19:35
F43nd1rF43nd1r
6,14331543
Based on vaadin docs you have few options: vaadin.com/docs/v11/flow/theme/theming-crash-course.html
– Teo Dragovic
Nov 22 '18 at 11:46
add a comment |
2
2
2
I've written a vaadin flow wrapper for this polymer element:
@Tag("simple-dropdown")
@HtmlImport("bower_components/simple-dropdown/simple-dropdown.html")
public class DropdownMenu extends Component implements HasComponents, HasSize, HasStyle {
...
}
This works. The documentation of simple-dropdown tells me I can style the shadow dom with this css:
simple-dropdown {
--simple-dropdown-toggle: {
justify-content: right;
}
}
However, I'm unable to find the right place for this css in Vaadin flow. Where do I have to put it?
css polymer web-component shadow-dom vaadin-flow
asked Nov 15 '18 at 19:35
F43nd1rF43nd1r
6,14331543
I've written a vaadin flow wrapper for this polymer element:
@Tag("simple-dropdown")
@HtmlImport("bower_components/simple-dropdown/simple-dropdown.html")
public class DropdownMenu extends Component implements HasComponents, HasSize, HasStyle {
...
}
This works. The documentation of simple-dropdown tells me I can style the shadow dom with this css:
simple-dropdown {
--simple-dropdown-toggle: {
justify-content: right;
}
}
However, I'm unable to find the right place for this css in Vaadin flow. Where do I have to put it?
css polymer web-component shadow-dom vaadin-flow
css polymer web-component shadow-dom vaadin-flow
asked Nov 15 '18 at 19:35
F43nd1rF43nd1r
6,14331543
asked Nov 15 '18 at 19:35
F43nd1rF43nd1r
6,14331543
asked Nov 15 '18 at 19:35
F43nd1rF43nd1r
6,14331543
asked Nov 15 '18 at 19:35
F43nd1rF43nd1r
6,14331543
asked Nov 15 '18 at 19:35
F43nd1rF43nd1r
6,14331543
6,14331543
Based on vaadin docs you have few options: vaadin.com/docs/v11/flow/theme/theming-crash-course.html
– Teo Dragovic
Nov 22 '18 at 11:46
add a comment |
Based on vaadin docs you have few options: vaadin.com/docs/v11/flow/theme/theming-crash-course.html
– Teo Dragovic
Nov 22 '18 at 11:46
Based on vaadin docs you have few options: vaadin.com/docs/v11/flow/theme/theming-crash-course.html
– Teo Dragovic
Nov 22 '18 at 11:46
Based on vaadin docs you have few options: vaadin.com/docs/v11/flow/theme/theming-crash-course.html
– Teo Dragovic
Nov 22 '18 at 11:46
add a comment |
2 Answers
2
active
oldest
votes
0
You may use it where the parent's style, something like:
my-element.html
<link rel="import" href="polymer/polymer.html">
<dom-module id='my-element'>
<template>
<style>
:host {
display:block;
}
simple-dropdown {
--simple-dropdown-toggle: {
justify-content: right;
}
}
</style>
<simple-dropdown origin="top right" label="menu" arrow>
<a href="#">item</a>
</simple-dropdown>
</template>
answered Nov 16 '18 at 18:56
HakanCHakanC
2,1843814
I tried to drop that file in my webapp/frontend folder, but nothing changed. I also tried adding@HtmlImport("frontend/my-element.html")to the class, but that didn't work either. How do I load your snippet?
– F43nd1r
Nov 18 '18 at 22:43
I am not sure that I understood you. Do you have a polymer app yet. Or you just trying an element. If second, so here at this link there are many polymer samples: codepen.io/tony19
– HakanC
Nov 19 '18 at 14:51
This is not a polymer project. It is a vaadin flow project, which happens to be able to load polymer components.
– F43nd1r
Nov 19 '18 at 15:08
I am sorry, i have no idea for vaadin flow.
– HakanC
Nov 19 '18 at 17:38
add a comment |
0
webapp/frontend/styles/shared-styles.html
<custom-style>
<style>
simple-dropdown {
--simple-dropdown-toggle: {
justify-content: right;
};
}
</style>
</custom-style>
Then, on the toplevel layout (not the flow wrapper!)
@HtmlImport("frontend://styles/shared-styles.html")
public class MainView extends Div {
...
}
answered Nov 28 '18 at 13:40
F43nd1rF43nd1r
6,14331543
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326765%2fshadow-dom-style-in-vaadin-flow%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You may use it where the parent's style, something like:
my-element.html
<link rel="import" href="polymer/polymer.html">
<dom-module id='my-element'>
<template>
<style>
:host {
display:block;
}
simple-dropdown {
--simple-dropdown-toggle: {
justify-content: right;
}
}
</style>
<simple-dropdown origin="top right" label="menu" arrow>
<a href="#">item</a>
</simple-dropdown>
</template>
answered Nov 16 '18 at 18:56
HakanCHakanC
2,1843814
I tried to drop that file in my webapp/frontend folder, but nothing changed. I also tried adding@HtmlImport("frontend/my-element.html")to the class, but that didn't work either. How do I load your snippet?
– F43nd1r
Nov 18 '18 at 22:43
I am not sure that I understood you. Do you have a polymer app yet. Or you just trying an element. If second, so here at this link there are many polymer samples: codepen.io/tony19
– HakanC
Nov 19 '18 at 14:51
This is not a polymer project. It is a vaadin flow project, which happens to be able to load polymer components.
– F43nd1r
Nov 19 '18 at 15:08
I am sorry, i have no idea for vaadin flow.
– HakanC
Nov 19 '18 at 17:38
add a comment |
0
You may use it where the parent's style, something like:
my-element.html
<link rel="import" href="polymer/polymer.html">
<dom-module id='my-element'>
<template>
<style>
:host {
display:block;
}
simple-dropdown {
--simple-dropdown-toggle: {
justify-content: right;
}
}
</style>
<simple-dropdown origin="top right" label="menu" arrow>
<a href="#">item</a>
</simple-dropdown>
</template>
answered Nov 16 '18 at 18:56
HakanCHakanC
2,1843814
I tried to drop that file in my webapp/frontend folder, but nothing changed. I also tried adding@HtmlImport("frontend/my-element.html")to the class, but that didn't work either. How do I load your snippet?
– F43nd1r
Nov 18 '18 at 22:43
I am not sure that I understood you. Do you have a polymer app yet. Or you just trying an element. If second, so here at this link there are many polymer samples: codepen.io/tony19
– HakanC
Nov 19 '18 at 14:51
This is not a polymer project. It is a vaadin flow project, which happens to be able to load polymer components.
– F43nd1r
Nov 19 '18 at 15:08
I am sorry, i have no idea for vaadin flow.
– HakanC
Nov 19 '18 at 17:38
add a comment |
0
0
0
You may use it where the parent's style, something like:
my-element.html
<link rel="import" href="polymer/polymer.html">
<dom-module id='my-element'>
<template>
<style>
:host {
display:block;
}
simple-dropdown {
--simple-dropdown-toggle: {
justify-content: right;
}
}
</style>
<simple-dropdown origin="top right" label="menu" arrow>
<a href="#">item</a>
</simple-dropdown>
</template>
answered Nov 16 '18 at 18:56
HakanCHakanC
2,1843814
You may use it where the parent's style, something like:
my-element.html
<link rel="import" href="polymer/polymer.html">
<dom-module id='my-element'>
<template>
<style>
:host {
display:block;
}
simple-dropdown {
--simple-dropdown-toggle: {
justify-content: right;
}
}
</style>
<simple-dropdown origin="top right" label="menu" arrow>
<a href="#">item</a>
</simple-dropdown>
</template>
answered Nov 16 '18 at 18:56
HakanCHakanC
2,1843814
answered Nov 16 '18 at 18:56
HakanCHakanC
2,1843814
answered Nov 16 '18 at 18:56
HakanCHakanC
2,1843814
answered Nov 16 '18 at 18:56
HakanCHakanC
2,1843814
2,1843814
I tried to drop that file in my webapp/frontend folder, but nothing changed. I also tried adding@HtmlImport("frontend/my-element.html")to the class, but that didn't work either. How do I load your snippet?
– F43nd1r
Nov 18 '18 at 22:43
I am not sure that I understood you. Do you have a polymer app yet. Or you just trying an element. If second, so here at this link there are many polymer samples: codepen.io/tony19
– HakanC
Nov 19 '18 at 14:51
This is not a polymer project. It is a vaadin flow project, which happens to be able to load polymer components.
– F43nd1r
Nov 19 '18 at 15:08
I am sorry, i have no idea for vaadin flow.
– HakanC
Nov 19 '18 at 17:38
add a comment |
I tried to drop that file in my webapp/frontend folder, but nothing changed. I also tried adding@HtmlImport("frontend/my-element.html")to the class, but that didn't work either. How do I load your snippet?
– F43nd1r
Nov 18 '18 at 22:43
I am not sure that I understood you. Do you have a polymer app yet. Or you just trying an element. If second, so here at this link there are many polymer samples: codepen.io/tony19
– HakanC
Nov 19 '18 at 14:51
This is not a polymer project. It is a vaadin flow project, which happens to be able to load polymer components.
– F43nd1r
Nov 19 '18 at 15:08
I am sorry, i have no idea for vaadin flow.
– HakanC
Nov 19 '18 at 17:38
I tried to drop that file in my webapp/frontend folder, but nothing changed. I also tried adding
@HtmlImport("frontend/my-element.html") to the class, but that didn't work either. How do I load your snippet?– F43nd1r
Nov 18 '18 at 22:43
I tried to drop that file in my webapp/frontend folder, but nothing changed. I also tried adding
@HtmlImport("frontend/my-element.html") to the class, but that didn't work either. How do I load your snippet?– F43nd1r
Nov 18 '18 at 22:43
I am not sure that I understood you. Do you have a polymer app yet. Or you just trying an element. If second, so here at this link there are many polymer samples: codepen.io/tony19
– HakanC
Nov 19 '18 at 14:51
I am not sure that I understood you. Do you have a polymer app yet. Or you just trying an element. If second, so here at this link there are many polymer samples: codepen.io/tony19
– HakanC
Nov 19 '18 at 14:51
This is not a polymer project. It is a vaadin flow project, which happens to be able to load polymer components.
– F43nd1r
Nov 19 '18 at 15:08
This is not a polymer project. It is a vaadin flow project, which happens to be able to load polymer components.
– F43nd1r
Nov 19 '18 at 15:08
I am sorry, i have no idea for vaadin flow.
– HakanC
Nov 19 '18 at 17:38
I am sorry, i have no idea for vaadin flow.
– HakanC
Nov 19 '18 at 17:38
add a comment |
0
webapp/frontend/styles/shared-styles.html
<custom-style>
<style>
simple-dropdown {
--simple-dropdown-toggle: {
justify-content: right;
};
}
</style>
</custom-style>
Then, on the toplevel layout (not the flow wrapper!)
@HtmlImport("frontend://styles/shared-styles.html")
public class MainView extends Div {
...
}
answered Nov 28 '18 at 13:40
F43nd1rF43nd1r
6,14331543
add a comment |
0
webapp/frontend/styles/shared-styles.html
<custom-style>
<style>
simple-dropdown {
--simple-dropdown-toggle: {
justify-content: right;
};
}
</style>
</custom-style>
Then, on the toplevel layout (not the flow wrapper!)
@HtmlImport("frontend://styles/shared-styles.html")
public class MainView extends Div {
...
}
answered Nov 28 '18 at 13:40
F43nd1rF43nd1r
6,14331543
add a comment |
0
0
0
webapp/frontend/styles/shared-styles.html
<custom-style>
<style>
simple-dropdown {
--simple-dropdown-toggle: {
justify-content: right;
};
}
</style>
</custom-style>
Then, on the toplevel layout (not the flow wrapper!)
@HtmlImport("frontend://styles/shared-styles.html")
public class MainView extends Div {
...
}
answered Nov 28 '18 at 13:40
F43nd1rF43nd1r
6,14331543
webapp/frontend/styles/shared-styles.html
<custom-style>
<style>
simple-dropdown {
--simple-dropdown-toggle: {
justify-content: right;
};
}
</style>
</custom-style>
Then, on the toplevel layout (not the flow wrapper!)
@HtmlImport("frontend://styles/shared-styles.html")
public class MainView extends Div {
...
}
answered Nov 28 '18 at 13:40
F43nd1rF43nd1r
6,14331543
answered Nov 28 '18 at 13:40
F43nd1rF43nd1r
6,14331543
answered Nov 28 '18 at 13:40
F43nd1rF43nd1r
6,14331543
answered Nov 28 '18 at 13:40
F43nd1rF43nd1r
6,14331543
6,14331543
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326765%2fshadow-dom-style-in-vaadin-flow%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Based on vaadin docs you have few options: vaadin.com/docs/v11/flow/theme/theming-crash-course.html
– Teo Dragovic
Nov 22 '18 at 11:46