Given the following html
Full html can be found here: http://pastebin.com/B3JASXwx
and using the Dom Crawler code
$pd->filter('.content > ul > li')->each(function(Crawler $node, $i){})
when looping over the results, it's stopping at the first <script> tag nested under the <ul> element, and instead only returning 9 elements, instead of all 14 <li> elements.
Is this a bug, or by design, and is there any for me to get all <li> items without resorting to a preg_match?
I've implemented stripping out all .* tags before feeding the HTML to the Symfony DOM parser, that seems to have cured the issue I was having.
Given the tags themselves contained DOM modifying code, I'm guessing that the Symfony parser was incorrectly reading the DOM tags inside the tags as valid tags, and not javascript modifications.
TL;DR - before passing your raw html into Symfony, make sure you strip out all tags
Related
I have a CSS stylesheet that contains a lot of declarations starting with html.some-class. Now I'm wondering if there would be any difference if I wrote :root.some-class.
I suppose that the browser may scan the whole DOM to try to apply the html.some-class rule, because there might be an invalid document with more than one <html> tag. On the other hand, in a valid HTML document (and I can be sure that the styled document is standard-compliant) there is only one root element, so that the :root search doesn't have to traverse the whole tree.
Taking the above into consideration, would my stylesheet be more efficiently applied if I used :root instead of html?
Footnote: I'm not able to get rid of the selector targeting the <html> tag.
In my Angular 4 app, I have a page whose content is stored into a JSON (partly CSS definitions and partly HTML markup) at a certain URL on my server. So I've made a shell component to host the content in Angular.
For HTML, I had to use <div [innerHTML]="my_html"></div> in the template and this.my_html = this.sanitizer.bypassSecurityTrustHtml(my_html); in the script.
For CSS, I tried
<style [innerHTML]="my_css"></style>
<style>{{my_css}}</style>
with different combinations of sanitization but Angular
always compromise the <style> element. In particular:
in this case it removes the element from the template but does'n append it to the head. The element just vanishes.
in this case it removes the element from the template and appends it to the head like this <style>{%BLOCK%}</style>. In other words, the element is useless.
In the end, I had to use jQuery $('<style>').text(my_css).appendTo('head'); in the ngOnInit() handler, which works nicely, but doesn't feel... Angular.
I am new to RiotJS (just discovered it yesterday). I just tried to do a little experiment which did NOT work. I created two tag files (navbar.tag and dropdown.tag). Each one was as simple as could be – simply a h3 tag with the name of the file:
// navbar.tag
<h3>Navbar</h3>
// dropdowntag
<h3>Dropdown</h3>
On my index.html page I want to nest the dropdown tag within the navbar tag like this:
<navbar>
<dropdown></dropdown>
</navbar>
That does not to work. Navbar shows up, but not dropdown. Only if I separate the two tags do both work -- i.e., like this:
<navbar></navbar>
<dropdown></dropdown>
Any idea how I can nest different tags within an html page. I know you can nest them within .tag files, but that is not what I want to do. What I want is the flexibility to nest custom tags that I create on ay html page (like I can do with regular html tags).
Any ideas?
Thanks.
You cannot modify the existing structure. RiotJS use this constraint as an advantage to ensure good performance.
To insert another tag into existing tag, use <yield/>.
See JSFiddle.
I am familiar with the :empty selector to select an element that contains no tags and also no text, but that's a step too far for me. I would like to know if there is a way to select tags that contain no child tags, but may contain some text.
For my purposes, it is acceptable to use CSS which only works on the latest version of Google Chrome (since this is intended for a Chrome extension).
The only way you can achieve this via CSS is by excluding every tag that could fit as child of that specific parent with the :not selector.
However, with JQuery you can do that by using the following code (for example):
if ( $('#myParent').children().length == 0 ) {
// do something
}
I need a way to make an entire DL element clickable with only one anchor tag, that validates as XHTML. As in:
<a>
<dl>
<dt>Data term</dt>
<dd>Data definition</dd>
</dl>
</a>
This currently doesn't validate as XHTML as the anchor tag cannot contain the DL. The only way I can get it to validate is if I make two anchor tags and place them inside DT and DD. As in:
<dl>
<dt><a>Data term</a></dt>
<dd><a>Data definition</a></dt>
</dl>
I'm trying to avoid this, as it would result in two href attributes requiring maintenance, introducing the possibility they could become out of sync.
Suggestions?
You cannot do this and still validate. You will have to make a choice:
Use non-valid markup
Use inner anchors
Use JavaScript
I recommend #2 as it is valid and will work for clients without JS.
Two years passed but someone may stumble upon this.
New list of solutions:
Use non-valid markup
Use inner anchors
Use JavaScript
Use HTML5 doctype instead, it validates nested elements into <a> tags